前端设置内容滚动，但隐藏滚动条

如题，只需要盒子内容滚动，无需出现滚动条，有参考其他大佬的经验：
1：使用定位的方式，将内容盖住滚动条
结构

<div class="father">
    <div class="son">
    </div>
</div>

样式

.father{
	width: 360px;
	height: 200px;
	position: relative;
	overflow: hidden;
}
.son{
	position: absolute;
	left: 0;
	top: 0;
	right: -17px;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}

2：将内容限制在盒子内容之中
结构

<div class="gdfather">
     <div class="father">
        <div class="son">
            ......
        </div>
     </div>
 </div>

样式

.gdfather{
  width: 200px;
  height: 200px;
}

.father {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}

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

.son::-webkit-scrollbar {
  display: none;
}

3隐藏滚动条
不同浏览器的书写方式
谷歌

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

ie

.element { -ms-overflow-style: none; }

火狐

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