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

2020-10-20 Jon

特殊情况下会有隐藏滚动条但是内容很长时要可以滚动的需求，当然可以通过插件来实现，但会给人杀鸡用牛刀的感觉，在此记录下使用 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>

发表评论：