位置固定和溢出-y：滚动问题

Posted 2023-03-06

【中文标题】位置固定和溢出-y：滚动问题

【英文标题】：Position fixed and overflow-y:scroll issue

【发布时间】：2015-12-29 05:17:39

【问题描述】：

我已经阅读了这个问题和答案：CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue 以及许多其他相互冲突的用例。我也尝试将不同的溢出类型应用于不同的父母。似乎没有什么能让我的用例正常工作。

我的情况

我有一个完整高度的固定菜单，其中包含大量链接，所以如果浏览器不够高，无法显示所有链接，我希望允许用户在固定 div 内滚动。 不是一个大胆的要求。

我该如何解决这个问题，这是我正在使用的设置示例：http://jsfiddle.net/mz9abf43/9/

更新

这是我的完整上下文代码的更新小提琴，这正是我希望我的菜单看起来的样子，但我只想在屏幕高度小于菜单长度时允许垂直滚动。 http://jsfiddle.net/mz9abf43/24/

预期输出

每个链接之间的线条应该溢出到蓝色菜单的右侧（如下图）并且还允许用户在蓝色菜单中滚动。目前我只能做其中之一。

我的结构是：

<div id="fixed">
    <nav>
       <ul class="menu">
         <div class="drop">
             <li>Link here</li>
             <li>Link here
                 <ul>
                    <div class="drop">
                        <li>Link here</li>
                        <li>Link here</li>
                    </div>
                 </ul>
             </li>
             <li>Link here</li>
         </div>
       </ul>
    <nav>
</div>

我的 CSS 是

#fixed 
        width:280px;
        position: fixed;
        top: 0;
        left: 0;
        bottom:0;
        z-index: 1000;
        background: #fff;


.menu   
        padding: 0;
        margin: 0;
        position: fixed;
        z-index: 9998;
        top:0;
        bottom:0;
        left:0;
        background: white;
        width: 280px;

        /* THIS IS NOT WORKING - HOW CAN I GET THIS WORKING? */
        overflow-y: scroll;
        overflow-x: visible;



.menu .drop 
            background: #fff;
            height: 100%;
            z-index: 0;

【问题讨论】：

预期输出是什么？

@G.L.P 每个链接之间的行应该溢出到蓝色菜单的右侧，同时还允许用户滚动蓝色菜单。目前我只能做其中之一。查看更新的问题。

您可能不知道，但是在 Safari 9（os x 上的最新版本）中，当您在 jsfiddle 中滚动时，一切都在黑白闪烁！您可能也想调查一下。

我们可以改变你的 html 结构吗？

@www139 它是一个 WP 生成的 UL 列表，我只能控制围绕子菜单 UL（.drop div）的内容。如果你能坚持下去，那么一定要改变你需要做的事情才能让它发挥作用。滚动闪烁，我只需要在 .menu li 上应用 BG 白色即可解决它。

【参考方案1】：

Position:fixed 不能滚动。当您使用 top:0 设置它时，您将元素定位为始终位于窗口顶部（而不是容器），恐怕这正是您将看到的，您的 ul 始终位于窗口顶部。

如果您的菜单可能包含许多元素，那么使用绝对定位可能会更好，这样您就会在正文中获得滚动条。

所以作为一个起点，您只需将固定为绝对值并删除bottom:0property：

.menu   
        padding: 0;
        margin: 0;
        position: absolute;
        z-index: 9998;
        top:0;
        left:0;
        background: white;
        width: 280px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;                
    

就像这个FIDDLE

您现在只需要确保此菜单的高度与您的内容一样“高”，这样它就会填满您的所有窗口高度。您可以使用基本的 jquery：

var menuHeight = $('.content').outerHeight(true );
$('.menu').css(
    'height': menuHeight + 'px'
);

计算“内容”容器的高度并将其作为 CSS 属性添加到菜单中：

JSFIDDLE2

注意：我从我的 cmets 就这个问题做出了这个回答。如果您发现任何其他问题，请随时在此处发表评论，我会尽力提供帮助（如果我知道如何）。

【讨论】：

结合 CSS min-height 媒体查询，我设法实现了我想要的。因此，我将绝对位置应用于 .menu 以使屏幕高度小于 800 像素，而对于大于此的屏幕，我应用了 position:fixed。

【参考方案2】：

您应该在.menu li a 中使用box-sizing:border-box 并在.menu .drop 中使用width: 70%;。

.menu li a 
    color: #aaa;
    text-transform: uppercase;
    font-size:12px;
    padding: 8px 35px;
    display: inline-block;
    width: 100%;
    border-bottom: 2px solid #f0f0f0;
    box-sizing:border-box;

UPDATE Fiddle

【讨论】：

如果我误解了这一点，但是这并没有达到我的问题所示的预期输出，请原谅我？

哦，不，我很抱歉@egr103 实际上我没有得到正确的，请检查更新小提琴，我希望它会帮助你。

那么，为了让 jsFiddle 正常工作，您做了哪些代码更改？你能更新答案吗？

恐怕这行不通。我不太明白 70% 的宽度如何显示右侧的菜单？

【参考方案3】：

如果我理解错了，请纠正我。

尝试添加以下css

.menu li a 
color: #aaa;
text-transform: uppercase;
font-size: 12px;
padding: 8px 35px;
display: inline-block;
width: 100%;
border-bottom: 2px solid #f0f0f0;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

您还需要删除 height:100% of .menu .drop 类以显示蓝色背景。

可能有帮助

【讨论】：

不幸的是，这没有奏效，请参阅我的问题中标题为“预期输出”的部分。不幸的是，就像@Maddy 的另一个答案一样，这切断了向右的箭头。查看更新的问题

【参考方案4】：

希望这就是你想要的 :)

<a style="float:right" href="http://www.asmhijas.com/">Visit me</a>


<div id="container1">
    <div id="container2">          
        <ul class="menu">
    <div class="drop">
        <li ><a href="#">Home</a></li>
        <li class="menu-item-has-children highlight"><a href="#" class="">HOVER ME!!</a>    
            <div class="drop">
                <ul class="sub-menu">
                    <li class="menu-item-has-children highlight"><a href="#" class="">2nd Level Page</a>
                        <div class="drop">
                            <ul class="sub-menu">       
                                <li class="highlight"><a href="#">3rd Level Page</a></li>
                                <li class="highlight"><a href="#">Another 3rd Level Page</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li class="highlight"><a href="http://www.asmhijas.com/">Visit me</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
    </div>
</ul>


    </div>
</div>

这里的风格

.menu   
        padding: 0;
        margin: 0;    
        z-index: 9998;
        top:0;
        bottom:0;
        left:0;
        background: white;

            -webkit-backface-visibility: hidden;
          backface-visibility: hidden;

    

    .menu li.highlight 
        -webkit-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
        -moz-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
        -ms-transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
        transition: all .1s cubic-bezier(.77,0,.175,1) .1s;
            -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
    

    .menu li.highlight:hover 
        -webkit-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        -moz-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        -ms-transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        transition: all .3s cubic-bezier(.77,0,.175,1) .7s;
        background: pink;
            -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
    

    .menu li > .drop li > .drop li.current-menu-item a,
    .menu li > .drop li.current-menu-item a,
    .contact.open a  color: #fff ; 

    .menu li 
        height: auto;
        width: 100%;
        list-style: none;
         border-bottom: 2px solid #f0f0f0;
         -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
        background: #fff;
        -webkit-user-select: none;
-webkit-touch-callout: none;
    

    .menu li a 
        color: #aaa;
        text-transform: uppercase;
        font-size:12px;
        padding: 0 35px;
        display: inline-block;
        width: 100%;
         line-height: 1.4em;
         height:58px;
         -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
    

        /* Sweep To Right */
        .menu li a 
          display: inline-block;
          vertical-align: middle;
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -moz-osx-font-smoothing: grayscale;
          position: relative;
          -webkit-transition-property: color;
          transition-property: color;
          -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
        

        .menu li a:before,
        .menu li.current-menu-item > .drop a:before,
        .menu li.current-menu-item.out a:before 
          content: "";
          position: absolute;
          z-index: -1;
          top: -2px;
          left: 0;
          right: 0;
          bottom: -2px;
          height: auto;
            background:pink;
          -webkit-transform: scaleX(.01);
          transform: scaleX(.01);
          -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;

            -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
        -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
        -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
        transition: all .45s cubic-bezier(.77,0,.175,1);
        

        .menu li a:hover,
        .menu li a:focus,
        .menu li a:active,
        .menu li.current-menu-item a,
        .menu li.current-menu-item.out a:hover   color: white; 

        .menu li.current-menu-item.out a  color: #aaa;

        .menu li a:hover:before,
        .menu li a:focus:before,
        .menu li a:active:before,
        .highlight:hover > a:before,
        .menu li .drop li.highlight:hover > a:before,
        .menu li.current-menu-item a:before,
        .menu li.current-menu-item > .drop a:hover:before,
        .menu li.contact.open a:before,
        .menu li.current-menu-item.out a:hover:before 
          -webkit-transform: scaleX(1);
          transform: scaleX(1);
        
        /* end sweep-to-right transitions */

        .menu .drop 
            background: #fff;
            height: 100%;
            z-index: 0;
            -webkit-box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
            -moz-box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
            box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
        
        .menu .drop li > .drop     z-index: -1;    

        .menu li > .drop 
            width:280px;
            margin: 0;
            padding: 0;
            position:fixed;
            left:-280px;
            top:0;
            bottom:0;
            height: 100%;
            display: block;

                -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
            -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
            -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
            transition: all .45s cubic-bezier(.77,0,.175,1);
        

        .menu li:hover > .drop,
        .menu li.hover_effect > .drop  left:280px; 
        .menu li ul li:hover > .drop,
        .menu li ul li.hover_effect > .drop  left:560px; 

        .menu .drop li .drop > ul height: 100%; background-color: #fff;        

        .menu .drop li ul li > .drop ul 
            -webkit-box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15);
            -moz-box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15);
            box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15); 

            .menu .drop.boom 
                left: -280px !important;
                -webkit-transition-duration: .5s;
                transition-duration: .5s;
            

            .menu li ul li > .drop.boom 
                -webkit-transition-delay: 0s;
            transition-delay: 0s;
            -webkit-transition-duration: .25s;
            transition-duration: .25s; 

        .menu li a.logo,
        .mobile-menu a.logo 
            text-align: center;
            font-family: 'Varela Round', Helvetica, Arial, sans-serif;
            font-weight: 400;
            font-size: 20px;
            height: auto;
            padding: 40px 0;
            text-transform: none;
            display: block;
            -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
            -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
            -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
             transition: all .45s cubic-bezier(.77,0,.175,1);
        

        .menu li a.logo > *,
        .mobile-menu a.logo > *  display: block; 
        .menu li a.logo span.monmouthshire,
        .mobile-menu a.logo span.monmouthshire  color: #222; 

        .menu li a.logo i,
        .mobile-menu a.logo i 
            -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                      transition: all 0.3s ease;
             font-size: 120px; line-height: .55em; position: relative; top:0; 

        .menu li a.logo:hover i,
        .mobile-menu a.logo:hover i  top: -5px; color: #38bf38
        .menu li a.logo:hover,
        .mobile-menu a.logo:hover  color: #38bf38

        .mobile-menu a.logo  font-size: 80% 
        .mobile-menu a.logo i  font-size: 40px 

        /* Arrow Right */
        .menu li a     position: relative; 

        .menu li a:after,
        .menu li > .drop li a:after,
        .menu li > .drop li > .drop li a:after,
        .menu li.current-menu-item.out a:after 
            content: '';
        position: absolute;
        border-style: solid;
        border-width: 32px 0 32px 20px;
        border-color: transparent pink;
        display: block;
        width: 0;
        z-index: -1;
        margin-top: -32px;
        margin-right:1px;
        right: 280px;
        top: 50%;
        -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
        -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
        -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
        transition: all .45s cubic-bezier(.77,0,.175,1);
        

.menu li:hover a:after,
        .menu li > .drop li:hover a:after,
        .menu li > .drop li > .drop li:hover a:after,
        .menu li.current-menu-item a:after,
        .menu li > .drop li > .drop li.current-menu-item a:after,
        .menu li > .drop li.current-menu-item a:after,
        .menu li.contact.open a:after,
        .menu li.current-menu-item.out:hover a:after 
            right:-20px;
        

        .highlight:hover a color: #fff;
        .highlight:hover > .drop a color: #aaa;
        .highlight > .drop li:hover a color: #fff;
        .highlight > .drop li > .drop   li a color: #aaa;
        .highlight > .drop li > .drop   li:hover a,
        .menu li > .drop li > .drop li.current-menu-item color:#fff;

#container1
    height: 100vh;
    width: 280px;
    overflow: hidden;



 #container2
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 23px;



bodyoverflow:hidden

Fiddle here

http://www.asmhijas.com/

【参考方案5】：

尝试将overflow-x、overflow-y设置为隐藏

这应该可以工作

【讨论】：

请详细说明为什么这可以解决问题，以便对未来的读者有用。谢谢！