I'm currently working on a template and facing a challenge that I can't quite comprehend. More specifically, I understand why it's happening, but I'm struggling to implement a cross-browser solution.
The issue revolves around a fixed block where the initial scroll is not available, but an empty scroll bar is displayed from the body to prevent the image from jumping into the carousel. Upon clicking, the scrollbar is supposed to be replaced and the scrollbar of the .content-wrapper block should be displayed.
However, this functionality seems to only work in Chrome, as in other browsers the scrollbar of .content-wrapper disappears under the carousel...
Is there a way to achieve a cross-browser solution for this problem?
<!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>