禁用滚动，但保持滚动条CSS [英] Disable scrolling but keep scrollbar CSS

问题描述

我无法找到解决方案，这里有个问题，但答案不是很有用（至少对我来说）。

我有一个JavaScript模式弹出窗口，通过在页面上放置透明div来禁用背景上的所有内容。它也通过将溢出设置为隐藏来禁用滚动，并且必须这样做，因为页面可以用鼠标滚轮滚动，否则会分散用户的注意力。

问题是，当隐藏和显示滚动条时页面调整大小，效果很难看。另外，我的页面设计的方式是，如果我阻止它调整大小，那也是丑陋的。

我想要的是禁用滚动条，但保持可见（页面内容比屏幕更长）。这是不是可能在CSS？

解决方案

而不是改变 css ，它将删除滚动条，并且如您所说更改页面的布局，请尝试调用 jquery函数 。

  //调用你的弹出窗口并在该函数内添加
 $（'body'）。on 'scroll scrollwheel touchmove'，function（e）{
 e.preventDefault（）; 
 e.stopPropagation（）; 
 return false; 
}）; 
  

然后，当您关闭模式时，调用相同的函数，但将替换为与关闭

I can't find a solution to this, there was a question over here, but the answers are not very usable (at least for me).

I have a JavaScript modal pop-up that disables everything on the background by placing transparent div over the page. It also disables the scrolling by setting the overflow to hidden, and must do so, because the page is scrollable with the mouse wheel otherwise and distracts the user.

The problem is, when hiding and showing the scrollbar the page resizes and the effect is ugly. Also, my page is designed in such a way that if I stop it from resizing that would be ugly either.

What I want is to disable the scrollbar, but keep it visible (the page content is longer than the screen fits). Is this somehow possible in CSS?

解决方案

Instead of changing the css, which will remove the scrollbar, and as you said change the layout of the page, try calling a jquery function instead.

// call your pop up and inside that function add below
$('body').on('scroll mousewheel touchmove', function(e) {
      e.preventDefault();
      e.stopPropagation();
      return false;
});

then when you close the modal, call the same function but replace on with off

这篇关于禁用滚动，但保持滚动条CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！