滚动条"/>
css实现滚动并隐藏滚动条
css实现滚动并隐藏滚动条
在做网页前端页面时，有些场景需要实现滚动的效果，但是由于滚动条的出现，造成页面效果有些突兀，不美观。
这时候就需要一个既能滚动并能隐藏滚动条的效果了。
1、简单来说 需要3个盒子
2、最外层的盒子与最里面的盒子要设置宽高
3、最外层的盒子需要设置相对定位 relative 溢出隐藏overflow: hidden;
4、最里层盒子需要绝对定位 设置overflow-y: scroll;
测试了一下，ie 火狐都可以用
以下全部代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"></head><style>.item,.outer-box {width:550px;height: 200px;}.outer-box {margin: 0 auto;position: relative;overflow: hidden;}.inner-box {position: absolute;overflow-y: scroll;}</style><body><div class="outer-box"><div class="inner-box"><div class="item"><h2>名言警句摘抄大全_名言名句大全</h2>1、最灵繁的人也看不见自己的背脊。——非洲<br />2、最困难的事情就是认识自己。——希腊<br />3、有勇气承担命运这才是英雄好汉。——黑塞<br />4、与肝胆人共事，无字句处读书。——周恩来<br />5、阅读使人充实，会谈使人敏捷，写作使人精确。——培根<br />6、最大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎<br />7、自知之明是最难得的知识。——西班牙<br />8、勇气通往天堂，怯懦通往地狱。——塞内加<br />9、有时候读书是一种巧妙地避开思考的方法。——赫尔普斯<br />10、阅读一切好书如同和过去最杰出的人谈话。——笛卡儿<br />11、越是没有本领的就越加自命不凡。——邓拓<br />12、越是无能的人，越喜欢挑剔别人的错儿。——爱尔兰<br />13、知人者智，自知者明。胜人者有力，自胜者强。——老子<br />14、意志坚强的人能把世界放在手中像泥块一样任意揉捏。——歌德<br />15、最具挑战性的挑战莫过于提升自我。——迈克尔·F·斯特利<br /></div></div></div></body>
</html>更多推荐
css实现滚动并隐藏滚动条
发布评论