试用后放弃,手机上会有问题……

方法一

使用三个容器包围起来,不需要计算滚动条的宽度。

实现代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <style>
        .element, .outer-container {
         width: 350px;
         height: 200px;
        }           
        .outer-container {
         position: relative;
         overflow: hidden;
        }           
        .inner-container {
         position: absolute;
         overflow-y: scroll;
        }        
  </style>
  <body>
       <div class="outer-container">
         <div class="inner-container">
         <div class="element">
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
         </div>
            </div>
         </div>
     </div>
  </body>
</html>

方法二

计算滚动条宽度并隐藏起来,使用绝对定位进行隐藏。向右移动了17个像素,刚好等于滚动条的宽度。(各浏览器均没有问题,但是要计算滚动条宽度)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <style>     
        .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;
        }    
  </style>
  <body>
       <div class="outer-container">
         <div class="inner-container">
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
            壮士不留名,留名非壮士。壮士留种不留名!</br>
         </div>
     </div>
  </body>
</html>

方法三

css 隐藏滚动条。那就是自定义滚动条的伪对象选择器::-webkit-scrollbar。(各浏览器均没有问题,但只能作用于html、body标签。)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>
  <style>     
        html {
            overflow: -moz-hidden-unscrollable;
            height: 100%;
        }  
        body::-webkit-scrollbar {
            display: none;//Chorme
        }    
        body {
            width: calc(100vw + 18px);//Firefox
            height: 100%;//Firefox
            -ms-overflow-style: none;//IE
            overflow: auto;Firefox
        }
  </style>
  <body>
       <div class="outer-container">
         <div class="inner-container">
            <script>
                for(var i=0;i<200;i++)
                {                  document.write("壮士不留名,留名非壮士。壮士留种不留名!</br>")   
                }
            </script>
         </div>
     </div>
  </body>
</html>

方法四

chrome 和Safari    
.element::-webkit-scrollbar { width: 0 !important }

IE 10+   
.element { -ms-overflow-style: none; }

Firefox    
.element { overflow: -moz-scrollbars-none; }