div--可滚动但不显示滚动条_使div标签出现滚动条但浏览器没有滚动条 csdn-优快云博客

本文链接：https://blog.youkuaiyun.com/a_smart_girl/article/details/105845515

本文展示了如何使用CSS让div元素可滚动却不显示滚动条，通过代码示例帮助理解实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>可滚动但不显示滚动条的div</title>
  </head>
  <script>
    function getData() {
      let arr = [];
      for (let i = 0; i < 10; i++) {
        let string = "";
        let j = i;
        while (j >= 0) {
          string += i;
          console.log("string", string);
          j--;
        }
        arr.push(string);
      }
      arr.forEach((item) => {
        let node = document.createElement("LI");
        let textnode = document.createTextNode(item);
        node.appendChild(textnode);
        document.getElementById("showList").appendChild(node);
      });

      arr.forEach((item) => {
        let node = document.createElement("LI");
        let textnode = document.createTextNode(item);
        node.appendChild(textnode);
        document.getElementById("showList01").appendChild(node);
      });
    }
  </script>
  <style>
    .container {
      display: flex;
      height: 100vh;
      align-items: center;
      justify-content: center;
    }
    .relative-box {
      position: relative;
      height: 200px;
      width: 170px;
      background: #ff9800;
      overflow: hidden;
      color: #fff;
    }
    .absolute-box {
      position: absolute;
      height: 200px;
      width: 170px;
      overflow: hidden;
      left: -20px;
    }
    .content-box {
      position: absolute;
      height: 200px;
      width: 170px;
      left: 20px;
      background: #ff9800;
      overflow-y: scroll;
    }
    .scroll-box {
      height: 200px;
      width: 170px;
      overflow: auto;
      color: #ff9800;
    }
    .box {
      display: flex;
      border: 1px solid #ff9800;
    }
  </style>
  <body onload="getData()">
    <div class="container">
      <div class="box">
        <div class="relative-box">
          <div class="absolute-box">
            <div class="content-box">
              <ul id="showList">
                <h2>可滚动不显示滚动条</h2>
              </ul>
            </div>
          </div>
        </div>
        <div class="scroll-box">
          <ul id="showList01">
            <h2>滚动显示滚动条</h2>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

效果展示（静态图片）：