gpt4 book ai didi

javascript - 当内部元素滚动位置到达顶部/底部时防止滚动父元素?

转载 作者:行者123 更新时间:2023-11-28 01:27:32 24 4
gpt4 key购买 nike

我有一个小的“ float 工具箱”——一个带有 position:fixed; 的 div溢出:自动。工作正常。

但是当在该框内滚动(使用鼠标滚轮)并到达底部或顶部时,父元素“接管”“滚动请求”:工具框后面的文档滚动。
- 这很烦人,而不是用户“要求的”。

我正在使用 jQuery 并认为我可以使用 event.stoppropagation() 停止此行为:
$("#toolBox").scroll(函数(事件){ event.stoppropagation() });

它确实进入了函数,但无论如何,传播仍然发生(文档滚动)
- 在 SO(和 Google)上搜索这个主题非常困难,所以我不得不问:
如何防止滚动事件的传播/冒泡?

编辑:
工作解决方案感谢 amustill(和 Brandon Aaron 的鼠标滚轮插件:
https://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js

$(".ToolPage").bind('mousewheel', function(e, d)  
var t = $(this);
if (d > 0 && t.scrollTop() === 0) {
e.preventDefault();
}
else {
if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {
e.preventDefault();
}
}
});

最佳答案

我添加这个答案是为了完整性,因为@amustill 接受的答案没有正确解决 Internet Explorer 中的问题。请参阅my original post中的评论了解详情。此外,这个解决方案不需要任何插件——只需要 jQuery。

本质上,代码通过处理 mousewheel 来工作。事件。每个这样的事件都包含一个 wheelDelta等于px的数量它将把可滚动区域移动到哪个位置。如果此值为 >0 , 然后我们滚动 up .如果wheelDelta<0然后我们滚动down .

FireFox:FireFox 使用 DOMMouseScroll作为事件,并填充 originalEvent.detail , 谁的 +/-与上面描述的相反。它通常返回 3 的间隔,而其他浏览器以 120 的间隔返回滚动(至少在我的机器上)。要更正,我们只需检测它并乘以 -40归一化。

@amustill's answer如果出现 <div>,则通过取消事件来工作的可滚动区域已经在顶部或底部的最大位置。但是,Internet Explorerdelta 的情况下忽略取消的事件。大于剩余的可滚动空间。

换句话说,如果你有一个 200px<div>包含 500px可滚动内容,以及当前 scrollTop400 , 一个 mousewheel告诉浏览器滚动的事件 120px进一步将导致 <div><body>滚动,因为 400 + 120 > 500 .

所以 - 为了解决这个问题,我们必须做一些稍微不同的事情,如下所示:

必要条件 jQuery代码是:

$(document).on('DOMMouseScroll mousewheel', '.Scrollable', function(ev) {
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.innerHeight(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;

var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
}

if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
});

本质上,这段代码取消了任何会产生不需要的边缘条件的滚动事件,然后使用 jQuery 设置 scrollTop<div>最大值或最小值,取决于 mousewheel 的方向事件正在请求。

因为事件在任何一种情况下都被完全取消,所以它永远不会传播到 body完全没有,因此解决了 IE 以及所有其他浏览器中的问题。

我也放了一个working example on jsFiddle .

关于javascript - 当内部元素滚动位置到达顶部/底部时防止滚动父元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51157117/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com