CSS实现隐藏滚动条并可以滚动内容效果最优解

2020-10-20 Jon html+css

特殊情况下会有隐藏滚动条但是内容很长时要可以滚动的需求,当然可以通过插件来实现,但会给人杀鸡用牛刀的感觉,在此记录下使用 css 处理该需求的实现方式

最常用的方式

这种方式简单不需要改变元素本身样式结构,不过缺点是火狐和ie不支持。如果对兼容性不在乎首推此种方式。

<!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>css 实现隐藏滚动条的同时还支持滚动</title>
  <style>
    .container {
      width: 350px;
      height: 200px;
      position: relative;
      overflow: auto;
      border: 1px solid #ccc;
    }
    .container::-webkit-scrollbar { width: 0 !important }
    .container { 
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="inner-container">
      <p>1这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>2这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>3这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>4这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>5这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>6这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>7这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>8这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>9这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>10这是一段话,啦啦啦啦啦啦啦啦啦</p>
    </div>
  </div>
</body>
</html>

兼容性最好的方式

看到网上不少是用几个div设置绝对定位等方式,个人觉得会影响元素本身的布局。而下面的方法是我手动调试时发现的,个人觉得此方法简介有效,并且对元素本身影响微乎其微。并在谷歌,火狐,safari,edge,ie等浏览器通过测试。

   html    37行
<!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>css 实现隐藏滚动条的同时还支持滚动</title>
  <style>
    .outer-container {
      height: 200px;
      overflow: hidden; /* 关键 */
      border: 1px solid rgb(175, 161, 161);
    }
    .content {
      height: 100%;
      margin-right: -17px; /* 关键 */
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <div class="outer-container">
    <div class="content">
      <p>1这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>2这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>3这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>4这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>5这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>6这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>7这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>8这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>9这是一段话,啦啦啦啦啦啦啦啦啦</p>
      <p>10这是一段话,啦啦啦啦啦啦啦啦啦</p>
    </div>
  </div>
</body>
</html>

标签: css 滚动条

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2020 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap