Fatal编程技术网
  • css/
  • Css 正文设置为overflow-y：隐藏，但页面在Chrome中仍然可以滚动

Css 正文设置为overflow-y：隐藏，但页面在Chrome中仍然可以滚动

css google-chrome scroll

Css 正文设置为overflow-y：隐藏，但页面在Chrome中仍然可以滚动,css,google-chrome,scroll,scrollbar,overflow,Css,Google Chrome,Scroll,Scrollbar,Overflow,我对Chrome中的overflow-y属性有问题。 即使我将其设置为隐藏，我仍然可以用鼠标滚轮滚动页面 这是我的密码： html， 身体{ 溢出y：隐藏； } #内容{ 位置：绝对位置； 宽度：100%； } .步骤{ 位置：相对位置； 高度：500px； 边缘底部：500px； } 这是第一步 这是第二步 这是第三步 从技术上讲，你的身体和html比屏幕宽，因此你可以滚动。您需要设置边距：0和填充：0以避免滚动行为，并在#content中添加一些边距/填充。将身体高度和html设置为10

我对Chrome中的
overflow-y
属性有问题。 即使我将其设置为
隐藏
，我仍然可以用鼠标滚轮滚动页面

这是我的密码：

html，
身体{
溢出y：隐藏；
}
#内容{
位置：绝对位置；
宽度：100%；
}
.步骤{
位置：相对位置；
高度：500px；
边缘底部：500px；
}

这是第一步
这是第二步
这是第三步
从技术上讲，你的
身体
和
html
比屏幕宽，因此你可以滚动。您需要设置
边距：0和
填充：0
以避免滚动行为，并在
#content
中添加一些边距/填充。
将身体高度和html设置为100%应该可以解决问题。如果没有定义的高度，您的内容不会溢出，因此您将无法获得所需的行为


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



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

我在
#content
上设置了
overflow-y
，并将我的步骤包装到另一个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;
}




这是第一步
这是第二步
这是第三步
#内容{
位置：绝对位置；
宽度：100%；
溢出y：隐藏；
排名：0；
底部：0；
}
.步骤{
位置：相对位置；
高度：500px；
边缘底部：500px；
}

正确答案是，您需要将JUST body设置为overflow:hidden。无论出于何种原因，如果您还将html设置为overflow:hidden，则结果就是您所描述的问题。
我发现另一个可行的解决方案是在内部容器上设置鼠标滚轮处理程序，并通过将其最后一个参数设置为false并停止事件气泡来确保它不会传播


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



Scroll在内部容器中工作正常，但事件不会传播到主体，因此不会滚动。这是对设置主体属性溢出：隐藏和高度：100%的补充。
在/FF和/Chrome上对我有效的是：


body {

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

}



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

我发现有一个缺点：如果在只想暂时停止滚动的页面上使用此方法，则设置
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 );       
}                                         


当您想“修复”身体的滚动时，请尝试以下操作：


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


当你想让它恢复正常时：


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


使用：


找出比主体大的元素（导致页面滚动的元素）并将其位置设置为固定。

注意：我不是要更改可拖动元素的位置。只有当有一个元素大于主体（大部分是宽度）时，才可以将可拖动元素拖出主体。
好的，当我的一个网站出现此问题时，这是一个对我有效的组合：


html {
    height: 100%;
}

body {
    overflow-x: hidden;
}



嗨，乔瓦尼，谢谢你的回复。我不太明白你的意思。你的意思是我应该设置边距/填充：0；在html和正文上？正确，只需添加html，正文{margin:0；padding:0；overflow-y:hidden；}不幸的是，这不起作用，我仍然可以在页面中滚动。您可能需要添加
框大小：边框框
到
#content
等等，您遇到了垂直滚动吗？即使没有
框大小：边框框，也似乎无法滚动谢谢，但这并不能解决问题：/如果您在JSFIDLE中删除一个示例并提供一个链接：（），可能会更容易得到有用的答案。从提供的代码片段来看，对于“可能”修复它的方法，这有点像是一个猜测游戏。谢谢，但是JSFIDLE没有显示任何问题，并且我的代码禁用了滚动。这个问题发生在浏览器窗口中，仅在Chrome浏览器中，并且使用Mac magic鼠标。这在iPhone上也适用。如果出现Safaris工具栏，会减少页面的内部宽度，这在横向上有点脆弱。这是一个很好的解决方案，但如果将iPhone更改为横向，并显示浏览器任务栏，则可能会被破坏。这应该是最被接受的答案。通过一些调整，这解决了所有问题，除了@Paddy这里所说的问题，但可能性非常小，这是最干净的解决方案。不管是谁，请记住添加一个名为noscroll的类，其位置固定，宽度和高度为100%。一旦在正文上设置了这些属性，就不需要该函数。只想链接这篇相关的文章，并为仍在寻找它的人提供答案：。会帮我完全相反，如何使禁用滚动的页面在第一次移除引擎盖时可滚动：#reg overlay{背景色：无！重要}

html {
    height: 100%;
}

body {
    overflow-x: hidden;
}