T之家12月9日消息 微軟對Chromium開源項目非常感興趣,因為該項目對Edge和Chrome都有利。微軟最新的功能請求之一就是希望通過部署Edge HTML風格的滾動特性從而讓Chromium的滾動變得更加靈敏。
微軟打算將Impulse樣式(即EdgeHTML樣式)滾動動畫加入到Chromium中,微軟已經將該滾動動畫移植到了基于Chromium的Edge瀏覽器的Dev Canary通道中。默認情況下,Edge瀏覽器中啟用了脈沖樣式的滾動動畫。對于Chrome,該功能可能會在未來幾天內出現在試驗版瀏覽器中。
微軟表示,Impulse-style (也就是EdgeHTML-style)滾動動畫將提供更靈敏的滾動體驗,用戶啟用后鼠標滾輪的每個刻度都試圖模仿基于物理的內容,內容會開始快速移動然后逐漸變慢。換句話說,由于開始時的快速加速,該模式會給人一種更靈敏的感覺。
此外微軟還在推行另一項稱之為“percent-based scrolling”(基于百分比的滾動)的滾動方案,該模式允許瀏覽器將鼠標滾輪或者鍵盤滾動解釋為預期滾動條的百分比。微軟目前正努力將經典版Edge瀏覽器的優秀特性移植到Chromium平臺上,包括這項基于百分比的滾動方式。
tml頁面設置動態金額滾動效果!
一開始加載頁面,數字都會過渡滾動到具體數字上!
代碼:
html:
css:
js:
動距離
document.body.scrollTop IE、FF
document.documentElement.scrollTop chrome
兼容性寫法:
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
與 document.documentElement 屬性不同的是, document.body 屬性返回 <body> 元素, document.documentElement 屬性返回 <html> 元素。
根節點
有兩種特殊的文檔屬性可用來訪問根節點:
document.documentElement chome object HTMLHtmlElement
document.body IE、FF object HTMLBodyElement
第一個屬性可返回存在于XML以及HTML文檔中的文檔根節點(html標記)。
第二個屬性是對HTML頁面的特殊擴展,提供了對<body>標簽的直接訪問(body標記)。
窗口尺寸、工作區尺寸
可視區尺寸寬度
document.body.clientWidth IE、FF
document.documentElement.clientWidth chome
兼容性寫法:
document.documentElement.clientWidth || document.body.clientWidth;
可視區尺寸高度
document.body.clientHeight IE、FF
document.documentElement.clientHeight chome
兼容性寫法:
document.documentElement.clientHeight || document.body.clientHeight;
獲取瀏覽器窗口水平滾動條的位置
document.body.scrollLeft;
document.documentElement.scrollLeft
兼容性寫法:
document.documentElement.scrollLeft || document.body.scrollLeft;
獲取瀏覽器窗口垂直滾動條的位置
document.body.scrollTop IE、FF
document.documentElement.scrollTop chrome
兼容性寫法:
document.documentElement.scrollTop || document.body.scrollTop;
注意:IE、FF已經支持documentElement對象的各種屬性, 而
以上兼容性寫法不影響所獲的屬性值
編寫自定義函數:
// 獲取瀏覽器窗口的可視區域的寬度
function getViewPortWidth() {
return document.documentElement.clientWidth || document.body.clientWidth;
}
// 獲取瀏覽器窗口的可視區域的高度
function getViewPortHeight() {
return document.documentElement.clientHeight || document.body.clientHeight;
}
// 獲取瀏覽器窗口水平滾動條的位置
function getScrollLeft() {
return document.documentElement.scrollLeft || document.body.scrollLeft;
}
// 獲取瀏覽器窗口垂直滾動條的位置
function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}
<!DOCTYPE HTML>聲明對JavaScript獲取窗口寬度和高度的影響
*請認真填寫需求信息,我們會在24小時內與您取得聯系。