javascript - event.preventDefault 不会阻止滚动
问题描述
从 lodash实现该debounce
功能后,该功能不再能够阻止用户在网站上滚动。
我试图将debounce
lodash 的部分外包给另一个函数,但我无法让它以这种方式工作。
这是代码:
$(document).on('mousewheel DOMMouseScroll', _.debounce(function(event) {
event.preventDefault();
var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
var a= document.getElementsByClassName('mouseScrollAnchor');
if(wd < 0) {
for(var i = 0 ; i < a.length ; i++) {
var t = a[i].getClientRects()[0].top;
if(t >= 40) break;
}
}
else {
for(var i = a.length-1 ; i >= 0 ; i--) {
var t = a[i].getClientRects()[0].top;
if(t < -20) break;
}
}
if(i >= 0 && i < a.length) {
$('html,body').animate({
scrollTop: a[i].offsetTop
});
}
}, 500));
我对该函数的期望:它阻止用户正常滚动,而是应该滚动到锚点列表中的下一个锚点。
它的作用:它确实让用户手动滚动(不应该允许),并且在 0.5 秒后它滚动到锚点。
基本上它按预期工作,除了event.preventDefault
部分。
编辑: 它现在正在工作!您可以在下面找到工作代码:
jQuery(document).ready(function($){
var changeView = function(event){
var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
var a= document.getElementsByClassName('mouseScrollAnchor');
if(wd < 0) {
for(var i = 0 ; i < a.length ; i++) {
var t = a[i].getClientRects()[0].top;
if(t >= 40) break;
}
}
else {
for(var i = a.length-1 ; i >= 0 ; i--) {
var t = a[i].getClientRects()[0].top;
if(t < -20) break;
}
}
if(i >= 0 && i < a.length) {
$('html,body').animate({
scrollTop: a[i].offsetTop
});
}
};
var mousewheelDebounced = _.debounce(changeView, 25);
$(document).on('mousewheel DOMMouseScroll', function(event) {
event.preventDefault();
mousewheelDebounced(event);
});
/*...*/
}
解决方案
推荐阅读
- javascript - 节点中的正文解析器
- jenkins - 变量未按预期在 Jenkins 管道阶段之间的 shell 命令之间共享
- mysql - Flask-SQLAlchemy 错误 MySQL 服务器已消失
- mysql - SELECT 字符串中的时间格式
- java - 如何将 Spring Webflux Websocket 路由作为注释?
- c - 日期格式字符串简化
- c# - 我的索引页面没有看到我在共享布局页面中加载的 javascript 库
- if-statement - 解析 Haskell 代码中输入“if”的错误
- python - 尝试使用 nexuscli 通过 python 连接到 nexus
- react-native - 反应原生Android项目没有在模拟器中启动