在悬停绝对div时滚动整页

Question

即使我没有徘徊比屏幕更长的部分，我也想整个页面。 这是代码：

 html, body { height: 100%; margin: 0px; background: #3a3a3a; overflow: auto; } body { background: green no-repeat center center; background-attachment: fixed; -webkit-background-size: cover; } .menu, .submenu li { line-height: 50px; text-align: center; font-size: 22px; background: #4096ee; border-radius: 10px; margin-top: 50px; cursor: pointer; color: white; transition: background 0.5s; } .submenu li { //display: none; } .center { margin: 0 auto; width: 25%; position: relative; border: 1px solid transparent; } #mask { background-color: rgba(0,0,0,0.7); position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; } 

  <div id="mask"></div> <div class="center"> <div class="menu menutwo">klick</div> <ul class="submenu" id="sub1"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> </div> 

我想在徘徊“边缘”时滚动。 它有点难以解释，只是在向左或向右盘旋绿色边时尝试滚动。

center-div不一定是25％，可能是px。

Answer 1

您的浏览器无法滚动尚未呈现的元素。 由于width: 25%; center div仅在屏幕的25％（水平居中）上呈现width: 25%; 因此你不能在边缘滚动它。 你可以尝试一些JS技巧，使其工作width: 25%; 但实际上，可能更容易让列表具有一个边距，使其渲染宽度为25％，真实宽度为100％。 考虑到左边距为37.5% ，右边距为37.5% ，渲染内容宽度为25% ，并且居中/可滚动。

这是有效的，因为现在两个center div都占据了屏幕的整个宽度。 由于margin-right和margin-left语句，菜单不会在整个区域内呈现其内容。 尝试“检查元素”，它非常擅长显示真实与内容的渲染边界的位置。

 html, body { height: 100%; margin: 0px; background: #3a3a3a; overflow: auto; } body { background: green no-repeat center center; background-attachment: fixed; -webkit-background-size: cover; } .menu, .submenu li { line-height: 50px; text-align: center; font-size: 22px; background: #4096ee; border-radius: 10px; margin-top: 50px; margin-left: 37.5%; margin-right: 37.5%; cursor: pointer; color: white; transition: background 0.5s; } .submenu li { //display: none; } .center { margin: 0 auto; position: relative; border: 1px solid transparent; } #mask { background-color: rgba(0,0,0,0.7); position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; } 

  <div id="mask"></div> <div class="center"> <div class="menu menutwo">klick</div> <ul class="submenu" id="sub1"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> </div>