Всем привет! Я работаю над шаблоном и не могу понять одной вещи, точнее почему происходит я понимаю, но как сделать кроссбраузерно?
Есть фиксированный блок, изначально скролл в нём недоступен, но пустой скролл бар отображается (от body), чтобы не прыгало изображение в карусели. Затем при клике делается подмена скроллбаров и отображается скролл бар этого блока (.content-wrapper)
Однако это работает только в Chrome, в остальных браузерах скроллбар (.content-wrapper) исчезает под каруселью...
Есть ли кроссбраузерное решение?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<style>
html,
body {
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
body {
overflow-y: scroll;
}
body.scroll {
overflow-y: hidden;
}
.content-wrapper {
height: 100%;
min-height: 100%;
width: 100%;
position: fixed;
}
body.scroll .content-wrapper {
overflow-y: scroll;
}
.carousel-wrapper {
position: fixed;
width: 100%;
height: 100%;
min-height: 100%;
z-index: 1;
background-color: black;
}
.content {
position: relative;
background-color: rgba(241, 156, 187, 0.5);
}
</style>
</head>
<body onclick="this.setAttribute('class', 'scroll')">
<div class="content-wrapper">
<div class="carousel-wrapper">
<div class="cover"></div>
<div id="carouselSlides" class="carousel slide carousel-fade align-self-sm-center align-self-md-start"
data-ride="carousel" data-interval="7500"
data-pause="false">
<div class="carousel-inner">
<div class="carousel-item active"><img
src="https://store-images.s-microsoft.com/image/apps.18496.14408192455588579.aafb3426-654c-4eb2-b7f4-43639bdd3d75.2c522ca4-9686-4ee2-a4ac-cdbfaf92c618?mode=scale&q=90&h=1080&w=1920"
class="d-block min-vw-100" alt="">
</div>
<div class="carousel-item"><img
src="https://149351115.v2.pressablecdn.com/wp-content/uploads/2018/12/Stack-Gives-Back-2018-.png"
class="d-block min-vw-100" alt="">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="content" style="height: 10000px">
content
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>