У меня есть нижний колонтитул и горизонтальная прокрутка, который имеет собственную полосу прокрутки, расположенную в нижней части экрана. Чтобы полоса прокрутки располагалась внизу экрана, моя горизонтальная прокрутка должна быть 100vh, но когда она равна 100vh, она помещается поверх нижнего колонтитула, а нижний колонтитул не активируется. Когда я поднимаю нижний колонтитул над горизонтальным прокручиваемым div, пользовательская полоса прокрутки больше не активируется, потому что она находится ниже нижнего колонтитула. Есть ли обходной путь для этого? Не уверены, что z-index может как-то быть в двух местах одновременно? Звучит невозможно ..
JSFiddle, показывающий проблему: (в этой текущей настройке полоса прокрутки не активируется ... уберите z-index в нижнем колонтитуле, и он станет кликабельным, но тогда нижний колонтитул больше не будет кликабельным. ..)
https://jsfiddle.net/pas3wqf2/
Код:
<div class="footer">
<li>
<a href="mailto:a@a.com">CONTACT</a><span class="span"> — </span>
</li>
<li>
<a href="https://www.instagram.com//" target="_blank">INSTAGRAM</a><span class="span"> — </span>
</li>
<li>
<a href="https://www.youtube.com/c/" target="_blank">YOUTUBE</a>
</li>
</div>
<div id="horizontalcontainer">
<div id="scrolling-wrapper">
<div class="videocard1">
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
<div class="videocard">
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
<div class="videocardlast">
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://www.youtube.com/embed/_OBlgSz8sSM" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div>
</div>
</div>
::-webkit-scrollbar {
height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: black;
border-radius: 25px;
}
#horizontalcontainer {
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
#scrolling-wrapper {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
margin: 0 auto;
height: 100vh;
width: 100vw;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.videocard1 {
padding-left: 27%;
padding-right: 2.5%;
display: inline-block;
position: relative;
width: 46.5%;
top: 50%;
transform: translateY(-50%);
}
.videocard {
padding-right: 2.5%;
display: inline-block;
position: relative;
width: 46.5%;
top: 50%;
transform: translateY(-50%);
}
.videocardlast {
padding-right: 27%;
display: inline-block;
position: relative;
width: 46.5%;
top: 50%;
transform: translateY(-50%);
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
z-index: 100000;
}
.footer>li {
margin-bottom: 2%;
display: inline-block;
}
.footer>li>a {
display: inline-block;
font-family: neue-haas-grotesk-text, sans-serif;
color: #7e7e7e;
font-weight: 400;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 11px;
}
.footer>li>a:hover {
color: black;
}
.span {
font-family: neue-haas-grotesk-text, sans-serif;
color: #7e7e7e;
font-weight: 400;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 11px;
user-select: none;
}
Спасибо!