Положение зафиксировано и переполнение-у: проблема прокрутки
Я прочитал этот вопрос и ответ: CSS overflow-x: visible; и переполнение-у: скрыто; вызывая проблему полосы прокрутки, а также кучу других конфликтующих случаев использования. Я также пытался применить разные типы переполнения к разным родителям. Кажется, ничто не помогает моему сценарию использования.
Мое дело
У меня есть фиксированное меню полной высоты, которое будет содержать много ссылок, поэтому, если браузер недостаточно высок, чтобы показать их все, я бы хотел, чтобы пользователь мог прокручивать внутри фиксированного 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;
}
5 ответов
Положение: фиксированное не может быть прокручено. Когда вы устанавливаете его с верхом:0 Вы размещаете элемент всегда в верхней части окна (не контейнера), и я боюсь, что это именно то, что вы увидите, ваш ul всегда в верхней части окна.
Вероятно, лучше использовать абсолютное положение, если в вашем меню может быть много элементов, поэтому вы получите полосу прокрутки на теле.
Таким образом, в качестве отправной точки вам просто нужно зафиксировать chnage для абсолютного и удалить bottom:0имущество:
.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;
}
как в этой скрипке
Теперь вам просто нужно убедиться, что высота этого меню такая же "высокая", как и ваш контент, чтобы он занимал всю высоту вашего окна. Вы можете использовать базовый JQuery:
var menuHeight = $('.content').outerHeight(true );
$('.menu').css({
'height': menuHeight + 'px'
});
где вы вычисляете высоту вашего "содержимого" контейнера и добавляете его как свойство css в ваше меню:
Примечание: я сделал этот ответ из моих комментариев к вопросу. Если вы обнаружите любую другую проблему, не стесняйтесь комментировать здесь, и я сделаю все возможное, чтобы помочь (если я знаю, как).
Вы должны использовать box-sizing:border-box в .menu li a и сделать width: 70%; в .menu .drop,
.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;
}
Если я не понял, пожалуйста, поправьте меня.
Попробуйте добавить подписку 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% класса.menu .drop для отображения синего фона.
Может быть, это поможет
Попробуйте установить overflow-x, overflow-y скрыть
это должно работать
Надеюсь, это то, что вы ищете:)
<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;
}
body{overflow:hidden}