黑科技！两行代码完美解决：同时设置overflow-x:hidden,overflow-y:visible无效的问题

时间：2024-11-07 20:35:26

不废话，直接上代码

<!DOCTYPE html>

<html>

  <head>

    <style>

      body {

        padding: 0;

        margin: 0;

        height: 800px;

        display: flex;

        justify-content: center;

        align-items: center;

      }

      .parent {

        width: 80vw;

        height: 200px;

        background-color: aqua;

        display: flex;

        align-items: center;

      }

      .wrapper {

        width: 100%;

        display: flex;

        align-items: center;

        overflow-x: hidden;

        overflow-y: visible;

        padding: 500px 0; /*极为重要的两行代码 */

        margin: -500px 0; /* 具体值可以根据实际情况调整 */

      }

      .imgDiv {

        padding-left: 50px;

      }

      .child {

        width: 70px;

        height: 100px;

      }

      .child:hover {

        transform: scale(4, 4);

      }

    </style>

  </head>

  <body>

    <div class="parent">

      <div class="wrapper">

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

        <div class="imgDiv">

          <img

            class="child"

            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"

          />

        </div>

      </div>

    </div>

  </body>

</html>

参考链接：

https://*.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue/39554003#39554003

相关文章