Javascript 平滑滚动跨浏览器
我试图不通过编写自己的scolling脚本来重新发明轮子,但我发现所有东西都使用jQuery(我不想把代码弄乱),不起作用,不支持键滚动或div滚动。。。什么都不够好 我在Windows7上运行:Opera和Chrome不能平滑滚动,所以我编写了代码,提供了平滑滚动的体验。然而,在默认情况下平滑滚动的Explorer 11中,我的脚本使它变得非常敏感。我在Mac OS上运行Chrome的朋友告诉我,那里的滚动也很平滑 我想我的问题可以通过列出需要javascript滚动增强的浏览器x OS(我没有访问所有内容的权限)或者通过改进代码来避免在不需要增强的浏览器下出现丑陋的行为来回答 所需的功能是Javascript 平滑滚动跨浏览器,javascript,scroll,Javascript,Scroll,我试图不通过编写自己的scolling脚本来重新发明轮子,但我发现所有东西都使用jQuery(我不想把代码弄乱),不起作用,不支持键滚动或div滚动。。。什么都不够好 我在Windows7上运行:Opera和Chrome不能平滑滚动,所以我编写了代码,提供了平滑滚动的体验。然而,在默认情况下平滑滚动的Explorer 11中,我的脚本使它变得非常敏感。我在Mac OS上运行Chrome的朋友告诉我,那里的滚动也很平滑 我想我的问题可以通过列出需要javascript滚动增强的浏览器x OS(我没
- 没有jQuery
- 平滑向上/向下键滚动
- 滚动divs,而不仅仅是主窗口
- 没有jQuery(这对我很重要,所以我两次提到它)
- 没有MooTools,没有框架,只有原生JS(可以接受perharps Modernizer或其他精益工具)
// easeOutQuad by Robert Penner
Math.easeOut = function (t, b, c, d) { t /= d; return -c * t*(t-2) + b; };
(function() { // do not mess global space
var
interval, // scroll is being eased
mult = 0, // how fast do we scroll
dir = 0, // 1 = scroll down, -1 = scroll up
steps = 50, // how many steps in animation
length = 30, // how long to animate
keyDelta = 0;
function KeyWheelHandler(e) {
if(e.which!=38 && e.which!=40) return;
keyDelta = e.which==38 ? -1 : 1;
mult = 4;
MouseWheelHandler(e);
}
function MouseWheelHandler(e) {
e.preventDefault(); // prevent default browser scroll
clearInterval(interval); // cancel previous animation
++mult; // we are going to scroll faster
var delta = keyDelta || -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if(dir!=delta) { // scroll direction changed
if(!keyDelta) mult = 1; // start slowly
dir = delta;
}
// get the closest scrollable parent
for(var tgt=e.target; tgt!=document.documentElement; tgt=tgt.parentNode) {
var oldScroll = tgt.scrollTop;
tgt.scrollTop+= delta;
if(oldScroll!=tgt.scrollTop) break;
}
var start = tgt.scrollTop;
var end = start + length*mult*delta; // where to end the scroll
var change = end - start; // base change in one step
var step = 2; // current step, not less than 2, see the (t-2) in EaseOut
interval = setInterval(function() {
var pos = Math.easeOut(step++,start,change,steps);
tgt.scrollTop = pos;
if(step>=steps) { // scroll finished without speed up - stop
mult = keyDelta = 0;
clearInterval(interval);
}
},15);
}
if(window.chrome) { // Opera and Chrome
window.addEventListener("mousewheel", MouseWheelHandler);
//window.addEventListener("DOMMouseScroll", MouseWheelHandler); // FF
document.documentElement.addEventListener("keydown", KeyWheelHandler);
}
})();
看来未来(截至2015年)将解决这一问题:
在用户代理定义的时间段内,使用用户代理定义的定时功能以平滑方式滚动滚动框。用户代理应遵循平台惯例(如有)
用户代理可以忽略此属性。(?)
关于忽略的说明可能是为什么要使用浏览器,而不是Chrome的原因,所以我希望Opera以后也能实现它
最新版本的IE、FF和Safari在默认情况下似乎到处都能顺利滚动,因此这个问题可以通过等待来解决。我将使用
控制盘事件作为默认事件,它是现代的跨浏览器版本。看起来您没有在侦听器中传递事件,因此使用该函数的部分将无法工作。不传递事件?你能告诉我确切的位置吗?window.addEventListener(“mouseweel”,mouseweelhandler)
mouseweelhandler
函数本身将e
作为参数,与其他函数一样……当然,e
与系统调用一起传递(旧的探索者除外)。如果我遗漏了什么,请用代码中的注释来回答。如果您有更好的解决方案,您可能想要回答,最好是带有权威参考的链接。