28

我对overflow-yChrome 中的属性有疑问。即使我已将其设置为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 中的垂直滚动吗？

谢谢！

4

10 回答 10

49

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

html, body {
  overflow-y:hidden;
  height:100%;
}
于 2013-10-08T21:37:58.517 回答
19

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

我将其设置为overflow-yon #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;
}
于 2013-10-09T18:17:17.390 回答
14

/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 );       
}
于 2014-12-12T21:34:29.177 回答
3

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

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

滚动在内部容器中工作正常，但事件不会传播到主体，因此它不会滚动。这是除了设置 body 属性overflow:hidden和height:100%之外的。

于 2014-07-29T20:44:24.707 回答
2

当你想“修复”你的身体滚动时试试这个：

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

当您想再次使其正常时：

jQuery('body').css('height', '').css('overflow-y', '');
于 2015-04-24T08:57:26.780 回答
1

采用：

overflow: hidden;
height: 100%;
position: fixed;
width: 100%;
于 2016-07-27T14:14:30.777 回答
0

找出比正文大的元素（导致页面滚动的元素）并将其位置设置为固定。注意：我不是在谈论改变可拖动元素的位置。只有当元素大于主体（主要是宽度）时，才可以将可拖动元素拖出主体。

于 2018-09-26T08:27:29.067 回答
-3

从技术上讲，你的尺寸body比html屏幕宽，所以你会滚动。您将需要设置margin:0;并padding:0;避免滚动行为，并添加一些边距/填充来#content代替。

于 2013-10-08T16:32:46.653 回答
-4

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

于 2014-02-17T05:41:28.570 回答
-4

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

html {
    height: 100%;
}

body {
    overflow-x: hidden;
}
于 2019-01-11T14:55:42.693 回答