Question

我有可滚动页面和固定位置的可滚动div。在大多数情况下，当我尝试滚动固定div时- 鼠标停留在可滚动的div上，页面仍在滚动。

如果我们删除固定位置并将其更改为绝对位置，则效果很好。

附加了JSFiddle。

<main>
    <section class="contents">
        <nav>
            <h1>Title</h1>
            <div class="scrollable">
                <div class="items"></div>
            </div>
        </nav>
    </section>
    <section class="content-body"></section>
</main>
<style>
    body {
        margin: 0;
    }

    main {
        display: flex;
    }

    section.contents {
        flex: 1;
        background: #ccc;
    }

    section nav {
        position: fixed;
        top: 0;
        width: 25%;
    }

    section.content-body {
        height: 3000px;
        background: #fff;
        flex: 3;
    }

    .scrollable {
        background: #b9f;
        height: 200px;
        overflow-y: scroll;
    }

    .items {
        height: 1000px;
        margin: 20px;
        background: #2795ee;
    }

    .scrollable::-webkit-scrollbar {
        -webkit-appearance: none;
    }

    .scrollable::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .scrollable::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0.2);
        opacity: 0.5;
    }

    .scrollable::-webkit-scrollbar:vertical {
        width: 8px;
    }
</style>

Chrome：尝试滚动固定位置元素的可滚动子元素时滚动页面

0 个答案: