Question

* {margin: 0; padding: 0; border: 0;}
ul {list-style: none;}

.work_page
{
    display: flex;
    width: 100vw;
    height: 100vh;
}

.btn_text
{
    display: flex;
    width: 50vw;
    height: 100vh;
    font-size: 5vw;
    font-weight: bold;
    background-color: grey;
}

.work
{
    margin-top: 50px;
    margin-left: 50px;
}

.btn_text ul
{
    margin-top: 50px;
    margin-left: 50px;
}

.personal
{
    margin-top: 30px;
}

.team_work
{
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    justify-content: space-evenly;
    width: 50vw;
    height: 200vh;
    background-color: blue;
}

.team_work div
{
    text-align: center;
    line-height: 40vh;
    width: 15vw;
    height: 40vh;
    margin: 10vh 1vw;
    background-color: rgba(0, 0, 0, 0.9);
}

<div class="work_page">
        <div class="btn_text">
            <div class="work">work</div>
            <ul>
                <li class="team">team</li>
                <li class="personal">personal</li>
            </ul>
        </div>
        <div class="team_work">
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work1</div>
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work2</div>
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work3</div>
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work4</div>
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work5</div>
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work6</div>
        </div>

大家好..这是我的代码，请告诉我为什么它不起作用我只想滚动蓝色背景 div 但它一起移动... 所以谷歌搜索的结果是在你想要滚动的 div 上添加溢出-y: auto。然后我在 .team_work div 上添加了属性，但它不起作用......我花了 2 个小时来修复它！！！帮帮我！

Answer 1

我已将 team_work 设置为 100vh 而不是 200vh。

* {margin: 0; padding: 0; border: 0;}
ul {list-style: none;}



.work_page
{
    display: flex;
    width: 100vw;
    height: 100vh;
}

.btn_text
{
    display: flex;
    width: 50vw;
    height: 100vh;
    font-size: 5vw;
    font-weight: bold;
    background-color: grey;
}

.work
{
    margin-top: 50px;
    margin-left: 50px;
}

.btn_text ul
{
    margin-top: 50px;
    margin-left: 50px;
}

.personal
{
    margin-top: 30px;
}

.team_work
{
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    justify-content: space-evenly;
    width: 50vw;
    height: 100vh;
    background-color: blue;
}

.team_work div
{
    text-align: center;
    line-height: 40vh;
    width: 15vw;
    height: 40vh;
    margin: 10vh 1vw;
    background-color: rgba(0, 0, 0, 0.9);
}

<body>
<div class="work_page">
        <div class="btn_text">
            <div class="work">work</div>
            <ul>
                <li class="team">team</li>
                <li class="personal">personal</li>
            </ul>
        </div>
        <div class="team_work">
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work1</div>
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work2</div>
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work3</div>
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work4</div>
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work5</div>
            <div data-aos="fade-up"
            data-aos-easing="linear"
            data-aos-duration="2000">work6</div>
        </div>
  </div>
</body>

我只想滚动 1 个 div 元素，但 css 溢出：自动不起作用

1 个答案: