JQuery - 在显示元素时阻止滚动

Question

我对此有点麻烦。如何在显示元素（div）时阻止浏览器滚动。

我有一个按钮（位于网页底部）以显示一个元素（位于网页顶部）。如果我滚动到页面底部单击按钮，浏览器会自动滚动到元素所在的顶部。我该如何防止这种情况？

基本上，当我滚动到网页底部以显示元素时，我想保留浏览器在页面底部的位置。反正有吗？

Answer 1

在此期间将HTML和BODY元素的CSS设置为：

$("body,html").css({"overflow":"hidden"});

事件结束后，添加以下jquery：

$("body,html").css({"overflow":"auto"});

这将在您的活动期间禁用scrollBar，并在完成后显示它。

Answer 2

您可以设置固定元素的位置，现在显示浮动从原始位置切除。像这样：

$('button').click(function(){
    $(element).css({'position': 'fixed', 'top': '30px'})
});

Answer 3

刚想通了。事实证明，我正在寻找的答案就在这里： https://forum.jquery.com/topic/show-and-hide-causing-page-to-scroll-top

然后你使用hide（）隐藏元素（使用display：none）因此停止在网页中占用空间。 show（）表现为display：block，因此开始在网页中占用空间。通过这样做，浏览器通过远程移植（或滚动）到显示或隐藏元素的位置进行调整。

为防止这种情况发生，可以使用以下方法：

• 为容器指定一个固定的高度尺寸，因此如果包含的元素消失，则高度保持不变，因此不会触发浏览器的调整。

• 在元素旁边添加1 x（element_height）透明gif

• 使用visibility：hidden和visibility：可见。 （但即使元素不可见，这仍占用空间）

使用第一个选项对我有用。希望这会有所帮助：）