前端如何才能做到左边滑动右边不动，右边滑动左边不动

[qq_37116094]

[qq_37116094]

求大神指点迷津啊

[qq_37116094]

没人么

[当作看不见]

总体是一个选项卡, 左边一个div(菜单) ,右边一个div,菜单内容

[qq_37116094]

是选项卡左边和右边是相对应的现在问题就在于如何才能做到左边滑动右边不动，右边滑动左边不动

[usecf]

左边一个div(菜单) ,右边一个div,菜单内容

[浪子回头8]

左边加上position:fixed;即可

[天际的海浪]

左右div都设置 overflow-y: scroll; height: 100px;

[天际的海浪]

overflow-y: scroll; height: 100%;

[冉娃娃]

左边和右边肯定是两个不同的块元素吧. 如果同时都动.那肯定是操作到他们两个的父元素上面去了,分别固定一下position:fix,然后overflow:scroll即可

<style>
    ul {
        list-style: none;
    }

    li {
        font-size: 36px;
        padding: 2em;
        background-color: gray;
        border-bottom: 1px solid black;
    }

    div {
        position: fixed;
        top: 0;
        bottom: 0;
        overflow: scroll;
    }

    div:first-child {
        left: 0;
    }

    div:last-child {
        right: 0;
    }
</style>

<div>
    <ul>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
        <li>左边</li>
    </ul>
</div>
<div>
    <ul>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
        <li>右边</li>
    </ul>
</div>