Céc*_*ron 23 css scroll google-chrome overflow scrollbar
我overflow-y在Chrome中遇到了该属性的问题.即使我已将其设置为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中的垂直滚动吗？
谢谢!
Rhi*_*rus 37
设置身体高度和100%的html应该可以解决问题.没有定义的高度,您的内容不会溢出,因此您将无法获得所需的行为.
html, body {
overflow-y:hidden;
height:100%;
}
Céc*_*ron 18
我终于找到了解决问题的方法,所以我在这里回答.
我设置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;
}
Sch*_*tod 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 );
}
| 归档时间： |
|
| 查看次数： |
87864 次 |
| 最近记录： |