0

Всем привет! Я работаю над шаблоном и не могу понять одной вещи, точнее почему происходит я понимаю, но как сделать кроссбраузерно?

Есть фиксированный блок, изначально скролл в нём недоступен, но пустой скролл бар отображается (от 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>

1 ответ 1

1

Итак, я добился желаемого результата, практически на 100%, как обычно IE делает финт...

Скажите кто сталкивался с таким поведением есть ли хак для него?

При скроллинге вниз фиксированный блок уезжает на 1px, только в IE(Edge)

При скроллинге вниз фиксированный блок уезжает на 1px, только в IE(Edge)

Исправления по вёрстке:

<!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 {
            position: fixed;
            overflow-y: scroll;
            width: 100%;
        }

        body.scroll {
            position: relative;
        }

        .carousel-wrapper {
            position: fixed;
            z-index: 1;
        }
    </style>
</head>
<body>
<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="content-wrapper container-fluid">
    <div class="content" style="height: 10000px">
        content
    </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>
<script>
    $('body').on('click', function () {
        $(this).toggleClass('scroll');
    });
</script>
</body>
</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.