源于最近的一个移动端走马灯需求,使用 touchmove 事件,来触发走马灯的动画。但是在实际运行时发现,滑动走马灯的时候很容易触发页面自身垂直方向的滚动,如下图
注:这里用 overflow: auto 模拟走马灯,只做 touchmove 的测试。
可以看出,在滑动过程中,滑动方向一旦偏向垂直方向,就会触发页面的垂直滚动。
因为是 touchmove 事件触发的垂直滚动,所以很容易就想到了通过 e.preventDefault() 来禁用事件的默认行为,又很容易就改了代码。
function Touch() {
const startTouchRef = useRef({x: 0, y: 0});
// 保存初始位置
function onTouchStart(e) {
startTouchRef.current = { x: e.touches[0].pageX, y: e.touches[0].pageY };
}
// 限制垂直方向上的滚动
function onTouchMove(e) {
const y = Math.abs(e.touches[0].pageY - startTouchRef.current.y);
const x = Math.abs(e.touches[0].pageX - startTouchRef.current.x);
// 简单判断滑动方向是倾向于 y 还是 x
// 禁止 x 方向的默认滚动,因为 x 方向的滚动会通过 Touchmove 或者 css 动画 实现
if (y < x) {
e.preventDefault();
}
}
return (
<div onTouchStart={onTouchStart}
onTouchMove={onTouchMove}>
// ...
</div>
)
}
最后很容易得到了一个报错。
真是人性化的报错,让我们去查看 https://www.chromestatus.com/features/5093566007214080 这个 url。
大意是说:addEventListener 有一个参数 passive 默认是 false,但是在 Chrome 56 的时候 把 touchstart 和 touchmove 的改成了默认 passive: true。这样,touchmove 事件就不会阻塞页面的滚动。因为在 passive: false 的状态下,不管是否需要调用 e.preventDefault() 来阻止页面滚动,都需要等到 touchmove 函数执行完毕,页面才会做出反应。
做一个简单的测试。
// 没有阻止页面滚动,仅仅是增加了事件处理的时间
function Touch() {
const ref = useRef(null);
function onTouchMove(e) {
console.time();
let index = 0;
for (let i = 0; i< 1000000000; i++) {
index++;
}
console.timeEnd();
}
useEffect(() => {
ref.current.addEventListener('touchmove', onTouchMove, { passive: false });
return () => {
ref.current.removeEventListener('touchmove', onTouchMove, { passive: false });
};
}, []);
return (
<div >
// ...
</div>
)
}
每次滑动后页面的响应明显卡顿,因为浏览器需要等 touchmove 执行完才知道是否需要禁止默认滚动。而将 passive 设为 true 后,浏览器将不考虑禁用默认行为的可能性,会立即触发页面行为。
当然,如果确实要阻止默认行为,就像我之前的那个需求一样,就需要手动设置 passive 是 false,然后正常使用 preventDefault 就好。不过,不管是哪种方式,我们都需要优化自己的执行代码,尽量减少时间代码运行时间。否则,还会看到以下警告:
关于被动事件监听,更多的优化是在移动端,pc 端貌似较少处理。我这里只测试了 mousewheel,在 pc 的 Chrome 74 下,尽管设置成了 passive: true,也没有优先触发页面的滚动行为。但是,在移动端模式下,是可以的。大家有兴趣的也可以自己测试一下。
因为 Chrome 56以上才支持 passive,所以在使用时可能需要做一下兼容性测试。代码来自 MDN。
// 如果触发对 options 取值 passive 的情况,说明支持 passive 属性
var passiveSupported = false;
try {
var options = Object.defineProperty({}, "passive", {
get: function() {
passiveSupported = true;
}
});
window.addEventListener("test", null, options);
} catch(err) {}
someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
? { passive: true } : false);
用于设置触摸屏用户如何操纵元素的区域(例如,浏览器内置的缩放功能)。 — MDN
这是一个 css 属性,简单来说,就是可以通过 css 指定允许用户使用的手势操作。
其他属性,大家可以去 MDN 自行查阅。结合我们的需求,使用 pan-y 只开启垂直方向的操作,也能做到类似的效果。需要注意的是,设置 touch-action,和我们设置 passive: false 再调用 preventDefault 效果是一样的,不会再对允许操作方向上的滑动效果进行优化。
另外,这个属性也有兼容性问题,在 Safari 上的支持效果并不好,具体查看 can i use。
对于元素的禁止滚动,其实我们给他的父元素添加 overflow: hidden 也能达到想要的效果。对于整个页面来说,就需要给 html 标签添加 overflow: hidden。但是,基于当前这个需求场景,因为只是希望在水平滑动时不触发垂直方向的滚动,所以需要判断什么时候设置属性,什么时候移除属性。
这里我没有具体去做这个测试,只是提供一种思路。
来自:https://github.com/wuyawei/fe-code/blob/master/questions/passive-EventListener.md
BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件,有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,slider等功能。better-scroll通过使用惯性滚动、边界回弹、滚动条淡入淡出来确保滚动的流畅。
基于webkit内容隐藏滚动条,核心代码是:overflow的值需要设置为auto或者scroll,然后设置::-webkit-scrollbar的display属性为none。当然也可以通过设置滚动条的宽度为0。
原生js获取滚动条在Y轴上的滚动距离、获取文档的总高度、获取浏览器视口的高度的方法实现,用于判断页面加载数据。
iScroll 是一款针对web app使用的滚动控件,它可以模拟原生IOS应用里的滚动列表操作,还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。
把原有的滚动条隐藏,创建个新的滚动条,并拓展其宽度,达到隐藏的效果,而判断滚动条是否滚动,保存原有的滚动条到顶部的距离,看是否发生改变,做出相应的判断。
window.onscroll为滚轮监听,document.body.scrollTop||document.documentElement.scrollTop 写两个是为了兼容不同浏览器。固定位置的top要设为负值,原因不明,若为0则会跟上方有空隙。左右位置虽然是0也要设,不然若为不是100%宽度的内容会出现左右跳动。
这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下
在前端开发中,需要获取浏览器滚动距离的需求,这篇文章主要讲解如何使用原生Js兼容实现获取浏览器获X轴,Y轴的滚动距离。并延伸扩展下我们一些不知道的js知识,希望对你有所帮助。
当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个返回顶部的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。百度下大部分都是在说overflow:hidden或者overflow-y: no可以解决问题,但是并不能很好的解决我们的问题,那么怎么办呢?
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!