隐藏滚动条并且还能滚动的方式

1.使用css的解决办法

原理就是让子盒子定位负数实现隐藏。
下边直接贴代码:
    <div class="outer-container">
        <div class="inner-container">
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
           <div>这里是测试的内容+++++++++++++++++++++++</div>
        </div>
    </div>
    css:        
    .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;
}

2.用css的scrollbar隐藏滚动条,缺点是不兼容ie

chrome 和Safari
		::-webkit-scrollbar { width: 0 !important }
IE 10+
.element { -ms-overflow-style: none; }
Firefox
.element { overflow: -moz-scrollbars-none; }

效果如图:
在这里插入图片描述

发布了21 篇原创文章 · 获赞 4 · 访问量 2740

猜你喜欢

转载自blog.csdn.net/smallico/article/details/100898552