Question

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

＆＃13;

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;
}

＆＃13;

  <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>

＆＃13;

我希望在悬停＆＃34;边距＆＃34;时滚动。它有点难以解释，只是在向左或向右盘旋绿色边时尝试滚动。

中心div不一定是25％，可能是px。

Answer 1

您的浏览器无法滚动尚未呈现的元素。由于center，width: 25%; div仅在屏幕的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>

在悬停绝对div时滚动整页

1 个答案: