Question

我在使用Chrome中的overflow-y属性时遇到问题。即使我已将其设置为hidden，我仍然可以使用鼠标滚轮滚动页面。

这是我的代码：

html,
body {
  overflow-y: hidden;
}

#content {
  position: absolute;
  width: 100%;
}

.step {
  position: relative;
  height: 500px;
  margin-bottom: 500px;
}

<body>
  <div id="content">
    <div class="step">this is the 1st step</div>
    <div class="step">this is the 2nd step</div>
    <div class="step">this is the 3rd step</div>
  </div>
</body>

有人知道如何阻止Chrome中的垂直滚动吗？

谢谢！

Answer 1

设置身体高度和100％的html应该可以解决问题。如果没有定义的高度，您的内容就不会溢出，因此您将无法获得所需的行为。

html, body {
  overflow-y:hidden;
  height:100%;
}

Answer 2

我终于找到了解决问题的方法，所以我在这里回答。

我在overflow-y上设置#content，然后将我的步骤包裹在另一个div中。有用。

以下是最终代码：

<body>
  <div id="content">
    <div id="steps">
       <div class="step">this is the 1st step</div>
       <div class="step">this is the 2nd step</div>
       <div class="step">this is the 3rd step</div>
     </div>
   </div>
</body>

#content {
  position:absolute;
  width:100%;
  overflow-y:hidden;
  top:0;
  bottom:0;
}
.step {
  position:relative;
  height:500px;
  margin-bottom:500px;
}

Answer 3

在/ FF和/ Chrome上对我有用：

body {

    position: fixed;
    width: 100%;
    height: 100%;

}

overflow: hidden只是禁用滚动条的显示。（但如果你愿意，可以把它放在那里）。

我发现有一个缺点：如果您在只想暂时停止滚动的页面上使用此方法，则设置position: fixed会将其滚动到顶部。这是因为position：fixed使用当前设置为0/0的绝对位置。

这可以修复，例如用jQuery：

var lastTop;

function stopScrolling() {
    lastTop = $(window).scrollTop();      
    $('body').addClass( 'noscroll' )          
         .css( { top: -lastTop } )        
         ;            
}

function continueScrolling() {                    

    $('body').removeClass( 'noscroll' );      
    $(window).scrollTop( lastTop );       
}

Answer 4

我发现的另一个解决方案是在内部容器上设置一个 mousewheel 处理程序，并确保它不会通过将其最后一个参数设置为false并停止事件冒泡来传播。 / p>

document.getElementById('content').addEventListener('mousewheel',function(evt){evt.cancelBubble=true;   if (evt.stopPropagation) evt.stopPropagation},false);

Scroll在内部容器中工作正常，但事件不会传播到正文，因此不会滚动。除了设置主体属性溢出：隐藏和高度：100％之外，还有其他内容。

Answer 5

使用：

overflow: hidden;
height: 100%;
position: fixed;
width: 100%;

Answer 6

当你想“修复”你身体的卷轴时试试这个：

jQuery('body').css('height', '100vh').css('overflow-y', 'hidden');

这是当你想再次恢复正常时：

jQuery('body').css('height', '').css('overflow-y', '');

Answer 7

找出比正文大的元素（导致页面滚动的元素），然后将其位置设置为固定。注意：我不是要更改可拖动元素的位置。仅当元素大于主体（主要是宽度）时，才能将可拖动元素从主体中拖出。

Answer 8

好的，当我在一个网站上遇到此问题时，这是对我有用的组合：

html {
    height: 100%;
}

body {
    overflow-x: hidden;
}

Answer 9

从技术上讲，body和html的尺寸比屏幕宽，因此您可以进行滚动。您需要设置margin:0;和padding:0;以避免滚动行为，并向#content添加一些边距/填充。

Answer 10

正确的答案是，你需要将JUST体设置为溢出：隐藏。无论出于何种原因，如果你还将html设置为overflow：hidden，结果就是你所描述的问题。

正文设置为溢出-y：隐藏但页面仍可在Chrome中滚动

10 个答案: