CSS中使用overflow时想要隐藏滚动条，仍然可以滚动

CssHero

已于 2023-12-20 20:27:24 修改

阅读量293

点赞数

文章标签： css css3 前端

于 2023-12-20 20:25:06 首次发布

本文链接：https://blog.csdn.net/CssHero/article/details/135116319

版权

问题描述

在使用overflow-x或overflow-y时，会出现滚动条但是我们可能不需要提供滚动条，但仍然想要可以继续滚动

在这里插入图片描述

	<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrapper{
        width: 500px;
        background-color: #bfa;
        overflow-x: auto;
      }
      .content{
        display: flex;
      }

    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="content">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <span>hahah</span>
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
      </div>
    </div>
  </body>
</html>

原因分析：

由于默认的父盒子的宽度不够展示，使用overflow会出现滚动条让用户看完内容

解决方案：

通过设置伪对象选择器::-webkit-scrollbar { display:none }。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .wrapper{
        width: 500px;
        background-color: #bfa;
        overflow-x: auto;
      }
      .content{
        display: flex;
      }
      /* 设置::-webkit-scrollbar可以让滚动条消失，但仍可以滚动 */
      .wrapper::-webkit-scrollbar {
        display:none
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="content">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <span>hahah</span>
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
        <img src="https://pic.tujia.com/upload/resourcespic/day_201124/202011241613557364.png" alt="">
      </div>
    </div>
  </body>
</html>