隐藏滚动条而不影响页面宽度或不稳定的页面重新呈现
Hiding scrollbar without affecting page width or shaky page re-rendering
我有一个 div 位置固定(我的对话框),当执行特定操作时,我会提供更高的 z-index 来接管我的页面。当 div 接管页面时,我试图通过 overflow:hidden;
来隐藏我的滚动条而不影响页面的宽度。有什么建议是如何执行的吗??
html, body {
background: #FFFFFF;
font-family: "Avenir Medium";
height: 100%;
transition: overflow 0.37s easein-out
}
.div-dialog{
display: none;
opacity: 0;
position: fixed;
width: 0;
left: 0;
top: 0;
z-index: 0;
overflow: hidden;
background: white;
-webkit-transition: opacity 0.30s ease-in-out;
transition: opacity 0.30s easein-out;
}
Jfiddle trying to replicate my result.The implementation am trying to realize is that of myspace 当您点击左上角的搜索图标时
终于能够通过执行以下操作解决我的问题
html,body{
height: 100%;
overflow: hidden;
}
body{
overflow: auto;
}
通过这样做,我的所有内容都保留在正文中,因此当元素的位置固定时,它会覆盖滚动条并且不受任何溢出变化的影响,overflow:hidden or overflow:auto
我有一个 div 位置固定(我的对话框),当执行特定操作时,我会提供更高的 z-index 来接管我的页面。当 div 接管页面时,我试图通过 overflow:hidden;
来隐藏我的滚动条而不影响页面的宽度。有什么建议是如何执行的吗??
html, body {
background: #FFFFFF;
font-family: "Avenir Medium";
height: 100%;
transition: overflow 0.37s easein-out
}
.div-dialog{
display: none;
opacity: 0;
position: fixed;
width: 0;
left: 0;
top: 0;
z-index: 0;
overflow: hidden;
background: white;
-webkit-transition: opacity 0.30s ease-in-out;
transition: opacity 0.30s easein-out;
}
Jfiddle trying to replicate my result.The implementation am trying to realize is that of myspace 当您点击左上角的搜索图标时
终于能够通过执行以下操作解决我的问题
html,body{
height: 100%;
overflow: hidden;
}
body{
overflow: auto;
}
通过这样做,我的所有内容都保留在正文中,因此当元素的位置固定时,它会覆盖滚动条并且不受任何溢出变化的影响,overflow:hidden or overflow:auto