javascript - 单击 anchor 书签时防止滚动事件

标签 javascript jquery html

单击 anchor 书签会触发滚动事件。

如何仅在用户滚动时触发回调,而不是在点击书签链接时触发回调?


注意: a poorly worded question答案已关闭,但我相信它对社区仍然有用,因为我没有在 StackOverflow 上看到类似问题的答案

最佳答案

Shomz 解决方案依赖于文档滚动上下文中的 anchor 元素。如果元素不在文档的滚动上下文中,则偏移检查可能会失败:

<body>
    <div style="max-height: 200px; overflow: auto">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <a name="myanchor">anchor</a>
</body>

我认为还有其他解决方案:

去抖

检测何时单击 anchor 链接 (hashchange/onclick) 并消除 scroll 事件。

var debounce = false;
window.addEventListener("hashchange", function () { // also add one for `onclick`
    debounce = true;
    setTimeout(function () {
        debounce = false;
    }, 1);
});
window.addEventListener("scroll", function () {
    if (debounce) {
        return;
    }
    // .. handle scroll
});

轮子

根据您在导航到 anchor 时不想触发滚动处理程序的具体原因,您可以考虑仅将其附加到 onwheel 事件。这意味着其他滚动方式(触摸、 anchor 、箭头键、Page Down 等)不会触发您的处理程序。

关于javascript - 单击 anchor 书签时防止滚动事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35433475/

相关文章:

javascript - Kendo DropDownList 触发器更改给出 "n is not a function"

html - 如何让我的下拉菜单项与导航栏父项的大小相同?

javascript - 将代码应用于动态加载的图像

javascript - webpack + shelljs 会抛出 "Error: Cannot find module '/exec-child.js'"

jQuery:链接多个子元素

jquery - CSS 动画缓慢且缓慢 - CPU 性能?

iphone - 如何通过媒体查询区分 Android 和 iPad?

html - 如何垂直居中对齐 div 元素与文本以外的内容

javascript - 数据增加时如何自动生成声音代码

javascript - $emit 内部异步方法 - Vue2