如何在不隐藏的情况下禁用滚动？

javascript jquery html css

2022-08-30 00:36:16

我正在尝试禁用父级的 html/body 滚动条，而我正在使用灯箱。这里的主要词是禁用。我不想用.overflow: hidden;

这样做的原因是使网站跳跃并占据滚动所在的区域。overflow: hidden

我想知道是否可以禁用滚动条，同时仍然显示它。

答案 1

如果叠加层下的页面可以“固定”在顶部，则当您打开叠加层时，您可以设置

body { position: fixed; overflow-y:scroll }

您仍然应该看到右侧滚动条，但内容不可滚动。当您关闭叠加层时，只需将这些属性还原为

body { position: static; overflow-y:auto }

我只是提出这种方式，只是因为您不需要更改任何滚动事件

更新

你还可以做一个小小的改进：如果你在层打开之前通过javascript获得属性，你可以动态地将该值指定为body元素的属性：使用这种方法，页面将站在它的位置上，无论你是在顶部还是你已经滚动过。document.documentElement.scrollToptop

断续器

.noscroll { position: fixed; overflow-y:scroll }

断续器

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');

答案 2

对公认的解决方案的四个小补充：

将“noscroll”应用于html而不是body，以防止IE中的双滚动条
在添加“noscroll”类之前检查是否确实有滚动条。否则，该网站还将跳转由新的非滚动滚动条推动。
为了保持任何可能的rollupTop，这样整个页面就不会回到顶部（就像Fabrizio的更新一样，但是在添加“noscroll”类之前，你需要抓住这个值）
并非所有浏览器都以与 http://help.dottoro.com/ljnvjiow.php 中记录的方式相同的方式处理 scrollTop

似乎适用于大多数浏览器的完整解决方案：

断续器

html.noscroll {
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

禁用滚动

if ($(document).height() > $(window).height()) {
     var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
     $('html').addClass('noscroll').css('top',-scrollTop);         
}

启用滚动

var scrollTop = parseInt($('html').css('top'));
$('html').removeClass('noscroll');
$('html,body').scrollTop(-scrollTop);

感谢Fabrizio和Dejan让我走上正轨，感谢Brodingo为双滚动条提供的解决方案