黑科技！兩行代碼完美解決：同時設置overflow-x:hidden,overflow-y:visible無效的問題

本文轉載自查看原文 2019-06-28 11:56 951

不廢話，直接上代碼

<!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://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue/39554003#39554003

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 對同一元素設置overflow-x:hidden,overflow-y:visible;屬性值不生效 overflow,overflow-x,overflow-y 用法 overflow-x:scroll失效問題解決關於overflow-y:scroll ios設備不流暢的問題 overflow-y:auto 回到頂部 overflow:hidden 失效問題設置overflow:auto無效的解決辦法 Postman測試接口發現時間少8個小時？添加這兩行代碼就解決！深入研究-webkit-overflow-scrolling:touch及ios滾動 overflow-y: scroll; HTML禁止右鍵復制【兩行代碼實現】