整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

让Chrome“滚”得更流畅:微软推荐Edge HTML风格滚动特性

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获取窗口宽度和高度的影响