时间戳

首页 > 解决方案 > Css交换滚动条问题

html - Css交换滚动条问题

问题描述

我正在开发一个模板，但我无法理解一件事，更确切地说，我理解它为什么会发生，但是如何跨浏览器做到这一点？

有一个固定块，最初其中的滚动不可用，但会显示一个空滚动条（从主体），以便图像不会跳入轮播。然后，当点击时，滚动条被替换，并显示该块（.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>

标签： htmlcss

解决方案

所以，我达到了预期的结果，几乎 100%，像往常一样 IE 做了一个假动作......

告诉我，谁面对这种行为，他有什么办法吗？

向下滚动时，固定块留下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>

推荐阅读