各大瀏覽器滾動條相容性問題

天使的同類發表於2020-12-03
瀏覽器

解決各大瀏覽器隱藏滾動條的相容性問題

<html>

<head>
  <style>
    .outer-container {
      width: 350px;
      height: 300px;
      overflow: hidden;
    }

    .inner-container {
      height: 300px;
      width: 350px;
      overflow-x: hidden;
      overflow-y: scroll;   //此處是縱向滾動  也可以橫向滾動  橫向滾動為overflow-x: scroll;overflow-y: hidden;
    }

    /* ::-webkit-scrollbar ,相容chrome和safari瀏覽器 */
    .inner-container::-webkit-scrollbar {
      display: none;
    }

    /* 相容火狐 */
    .inner-container {
      scrollbar-width: none;
    }

    /* 相容IE10+ */
    .inner-container {
      -ms-overflow-style: none;
    }
  </style>
</head>

<body>
  <div class="outer-container">
    <div class="inner-container">
      內容
    </div>
  </div>
</body>

</html>

相關文章