隐藏滚动条，而不影响页面宽度或页面重新呈现抖动

Hiding scrollbar without affecting page width or shaky page re-rendering

本文关键字：新呈现 抖动 滚动条 影响 隐藏      更新时间：2023-09-26

我有一个固定位置的div（我的对话框），当执行某个操作时，我给它一个更高的z索引来接管我的页面。我试图通过执行overflow:hidden;来隐藏我的滚动条，而不会影响div 接管页面时的页面宽度。任何建议如何执行？？

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试图复制我的结果。我试图实现的实现是当您单击左上角的搜索图标时myspace的实现

终于能够通过执行以下操作来解决我的问题

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

通过这样做，我的所有内容都保留在正文中，因此当元素的位置为固定时，它会覆盖滚动条，并且不受其溢出的任何更改的影响，overflow:hidden or overflow:auto

相关文章：