html中怎样隐藏滚动框，并实现滚动效果

     html中通过设置css熟悉overflow:auto或者overflow-x:scroll或者overflow-y:scroll;

但是会出现这样的滚动框，如图所示：

解决方法：我先说最优的解决方法，大家都可以选择最优的解决方法去解决开发中遇到的需求问题。

然后是解决方法2 .可以作为次要的解决方案。

 

最优解决方案：通过改编滚动框的样式，使滚动框的样式更美观，可通过滚动框滑动页面，也可以通过滚动鼠标轴滑动页面。

实现效果如图：

实现代码：

/* CSS Document */
/* 设置滚动条的样式 */
::-webkit-scrollbar{
	width: 12px;
}
/*滚动槽*/
::-webkit-scrollbar-track{
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3) ;
	border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255, 0, 0, 0.4);
}

解决方法2：

在内容区域外层套一个div，设置div的