Chrome: страница прокручивается при попытке прокрутить прокручиваемый дочерний элемент фиксированного элемента - PullRequest
Новая
       26

Chrome: страница прокручивается при попытке прокрутить прокручиваемый дочерний элемент фиксированного элемента

0 голосов
/ 05 июня 2019

У меня есть прокручиваемая страница и прокручиваемый div с фиксированной позицией. В большинстве случаев, когда я пытаюсь прокрутить фиксированный div - Мышь находится над прокручиваемым элементом div, а страница все еще прокручивается.

Если мы удалим фиксированную позицию и изменим ее на абсолютную, она будет работать нормально.

JSFiddle прилагается.

https://jsfiddle.net/zvsyr58x/

<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>
...