在macOS中，默认所有程序的滚动条是隐藏的，一方面看着舒服，而且对于小屏幕的电脑也能多一些空间显示。我已经习惯没有滚动条显示的操作了。
 回到windows10中，发现chrome有滚动条不习惯，就想能不能把这个滚动条隐藏呢？
 特别是我在windows10下使用webssh的时候，明明不需要滚动条，确显示一个粗大的滚动条，看着不舒服。如下图：
 
 
通过配置后，没有滚动条了，舒服多了。
 
 
开启及还原的方式
 
地址栏输入 > chrome://flags/#overlay-scrplbars > 选择 Enable 开启，Disable 禁用。
 
 
参考
 
http://www.qiuyexitong.com/article/4643.html

隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。
 
方法1：计算滚动条宽度并隐藏起来
 在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。
 
<div class="outer-container">
    <div class="inner-container">
    	......
    </div>
</div>

.outer-container{
	width: 360px;
	height: 200px;
	position: relative;
	overflow: hidden;
}
.inner-container{
	position: absolute;
	left: 0;
	top: 0;
	right: -17px;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}
 
这个代码巧妙的向右移动了17个像素，刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome和IE没发现问题
 
方法2：使用三个容器包围起来，不需要计算滚动条的宽度
 该代码最早是在Microsoft博客上看到的，跟我上面的思路差不多，只不过人家里面又加多了一个盒子，将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。 代码如下：
 
 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>
 
.element, .outer-container {
  width: 200px;
  height: 200px;
}

.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}

.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.inner-container::-webkit-scrollbar {
  display: none;
}
 
方法3：css隐藏滚动条
 
同时该文章还分享了一种通过CSS隐藏滚动条的方法，不过这个方法不兼容IE，做移动端的可以使用。 那就是自定义滚动条的伪对象选择器::-webkit-scrollbar，详情请看之前的文章：CSS3自定义webkit滚动条样式 chrome 和Safari
 
.element::-webkit-scrollbar { width: 0 !important }
//IE 10+
.element { -ms-overflow-style: none; }
//Firefox
.element { overflow: -moz-scrollbars-none; }

 
css 横向滚动隐藏滚动条
 
Introduction:
 
 
 介绍： 
 
 
It is always nice to have a responsive website or web page, to create such websites or web pages we have to make use of our developing skills to a great extent to bring about the functionality as well as the appearance of the web page or website. CSS helps in making such tasks easy, as CSS is used for styling and various style attributes are used profoundly to create a very responsive yet attractive website or web page. Anyone can create websites or web pages with ample knowledge but all the creative and unique websites or web pages demand something beyond the fundamental knowledge skills.
 
 
 拥有响应式网站或网页总是很高兴，要创建这样的网站或网页，我们必须在很大程度上利用我们的开发技能来实现网页或网站的功能以及外观。 CSS有助于简化此类任务，因为CSS用于样式设置，并且各种样式属性被深度使用来创建响应Swift但引人入胜的网站或网页。 任何人都可以创建具有丰富知识的网站或网页，但是所有具有创造性和独特性的网站或网页都需要一些基本知识以外的知识。 
 
 
As we know, we can use CSS for styling our web page or website therefore the topic of this section is also related to CSS. So let us keep moving and see how can we hide scroll bars while using CSS, which would be very cool, right? So how do we do that? Is there a method? Is there a particular property to do it? Well, if you are wondering if there is a certain property to achieve this then you are correct. Let us have a look at this property!
 
 
 众所周知，我们可以使用CSS来设置网页或网站的样式，因此本节的主题也与CSS有关。 因此，让我们继续前进，看看如何在使用CSS时隐藏滚动条，这非常酷，对吧？ 那么我们该怎么做呢？ 有没有办法？ 有特定的属性吗？ 好吧，如果您想知道是否有某种属性可以实现此目标，那么您是正确的。 让我们看看这个属性！ 
 
 
Property:
 
 
 属性： 
 
 
To hide the scroll bar you may use -WebKit- and display it to none. Well, why only WebKit? The answer to that is that WebKit property is supported by a large group of browsers, for example, chrome, safari, etc. Therefore it would be convenient to implement WebKit property if you are planning to hide the scroll bar. Although there are properties for different browsers which are listed below,
 
 
 要隐藏滚动条 ，可以使用-WebKit-并将其显示为none 。 好吧，为什么只有WebKit？ 答案是，大量浏览器(例如chrome，safari等)都支持WebKit属性。因此，如果您打算隐藏滚动条，则可以方便地实现WebKit属性。 尽管下面列出了不同浏览器的属性， 
 
 
For Firefox you can use -Moz-.
 对于Firefox，您可以使用-Moz- 。 
For Internet Explorer, you can use -ms-.
 对于Internet Explorer，可以使用-ms- 。 
 
Note:
 
 
 注意： 
 
 
It would be pretty cool if we can hide our scroll bar while scrolling but there are some very crucial points that you must consider before proceeding to implement this method.
 
 
 如果我们可以在滚动时隐藏滚动条，那将非常酷，但是在继续实现此方法之前，您必须考虑一些非常关键的要点。 
 
 
You should prefer to hide the scroll bar only when you are sure that the content of your website or web page would still be visible to the user because the user might skip the content.
 仅当您确定网站或网页的内容仍对用户可见时，才应选择隐藏滚动条，因为用户可能会跳过该内容。 
You should try to avoid horizontal scrolling on your web pages or websites and you must also try to avoid hiding horizontal scroll bars, as it becomes difficult to read the content.
 您应尝试避免在网页或网站上进行水平滚动，并且还应避免隐藏水平滚动条，因为这样会难以阅读内容。 
Even if you still want to hide the scroll bar, then place all the important information about the web page or web site above the fold.
 即使您仍想隐藏滚动条，也应将有关网页或网站的所有重要信息放在折叠上方。 
 
Syntax:
 
 
 句法： 
 
 
    element::-webkit-scrollbar{
        display:none;
    }


 
Example:
 
 
 例： 
 
 
<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            background-color: #f40;
            color: #fff;
            width: 200px;
            height: 200px;
            border: 1px dotted black;
            overflow-y: scroll;
        }
        
        div::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body>
    <h2>Hide scrollbar while scrolling</h2>
    <p>Scroll the below div element</p>
    <div>
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp.
    </div>
</body>

</html>


 
Output
 
 
 输出量 
 
 
  

    
  
 
 
In the above example, try to run the code and scroll the content inside the div element.
 
 
 在上面的示例中，尝试运行代码并滚动div元素内的内容。 
 
 

  
翻译自: https://www.includehelp.com/code-snippets/how-to-hide-scroll-bar-while-scrolling-using-css.aspx
 
 
css 横向滚动隐藏滚动条

项目场景需求要在局部实现滚动，但是滚动出现了滚动条，一瞬间感觉整个页面都不好了，经过努力css成功实现滚动同时隐藏滚动条，废话不多说，直接上代码
 
核心代码：
 
::-webkit-scrollbar{
    display:none;
}
 
使用方法：设置滚动后在容器上添加该css样式；
 
ul::-webkit-scrollbar{
    display:none;
}
 
 
 
案例：
 
代码：
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>隐藏滚动条</title>
    <style>
        ul{
            margin: 50px auto;
            padding: 0;
            width:300px;
            height:400px;
            border:solid #000 2px;
            list-style: none;
        }
        li{
            line-height:48px;
            background: yellowgreen;
        }
        ul{
            overflow-x: hidden;
            overflow-y: scroll; 
        }
        ul::-webkit-scrollbar{
            display:none;
        }
    </style>
</head>
<body>
    <ul>
        <li>测试隐藏滚动条</li>
        <li>测试隐藏滚动条</li>
        <li>测试隐藏滚动条</li>
        <li>测试隐藏滚动条</li>
        <li>测试隐藏滚动条</li>
        <li>测试隐藏滚动条</li>
        <li>测试隐藏滚动条</li>
        <li>测试隐藏滚动条</li>
        <li>测试隐藏滚动条</li>
        <li>测试隐藏滚动条</li>
        <li>测试隐藏滚动条</li>
        <li>测试隐藏滚动条</li>
    </ul>
</body>
</html>
 
效果：