如何避免在滚动移动设备屏幕时直接触摸另一个锚点并触摸它使其停止？ [英] how to avoid direct to another anchor when scroll mobile device screen and touch it to make it stop?
问题描述
我在开发hybird移动应用程序时遇到问题。我想知道在滚动移动设备屏幕时如何避免重定向到另一个锚点并触摸它使其停止？
I have a problem when developing hybird mobile app. I want to know how to avoid redirect to another anchor when scroll mobile device screen and touch it to make it stop?
例如，我有一个页面，它有很多标签，并且有一个非常大的高度属性，所以页面会滚动。但是当页面滚动时，当我只是想停止滚动页面并观看一些细节内容，我触摸屏幕。但意外地触发了标签锚点，因此重定向到另一个锚点。我不想要糟糕的用户体验，我想延迟更多时间，所以当我触摸屏幕滚动将停止，也许500毫秒后，我点击一个标签，我可以得到另一个锚点。
For example ,I have a page which has so many tags and has a very big height attribute,so the page would scroll .But when the page was scrolling ,when I just want to stop scroll the page and watch some detail content,I touch the screen .But unexpectedly triggered the tag anchor ,so redirect to another anchor.I don't want the bad user experience,I want to delay more time so when I touch the screen the scroll would stop and after maybe 500ms ,I click a tag I can get another anchor.
我也有一个简单的jsfidle为了使这个问题更多可以理解。
I also have a simple jsfidle for that to make the question more understandable .
https://jsfiddle.net/6h57hwwf/
一些核心代码
some core code for that
<body>
<div>
<a href="http://www.google.com">www.google.com</a>
</div>
<div>
<a href="http://www.bing.com">www.facebook.com</a>
</div>
<div>
<a href="http://www.google.com">www.google.com</a>
</div>
<div>
<a href="http://www.bing.com">www.facebook.com</a>
</div>
<div>
<a href="http://www.google.com">www.google.com</a>
</div>
<div>
<a href="http://www.bing.com">www.facebook.com</a>
</div>
<div>
</html>
推荐答案
无论基础浏览器如何，这里都有一个解决方案：在滚动时添加一个覆盖整个容器的透明元素，使所有锚点都不可点击，并在滚动停止后的500毫秒内将其隐藏。
Here's one solution regardless of the underlying browser: add a transparent element that covers the whole container when scrolling, rendering none of the anchors clickable, and hide it in 500ms after the scrolling stops.
const mask = document.getElementById('mask');
mask.style.visibility = 'hidden';
const showMask = () => {
if (mask.style.visibility === 'hidden')
mask.style.visibility = 'visible';
}
const hideMask = () => {
if (mask.style.visibility === 'visible')
mask.style.visibility = 'hidden';
}
const debounced = _.debounce(hideMask, 1000);
window.addEventListener('scroll', e => {
showMask();
debounced();
});
https://jsfiddle.net/8bz7dd7p/1/
请注意，我在面具上添加了一个颜色以供说明，同样，隐藏面具的功能应该被消除。
Note that I add a color in the mask for illustration, also, the function to hide the mask should be debounced.
这篇关于如何避免在滚动移动设备屏幕时直接触摸另一个锚点并触摸它使其停止？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
