首页 > 代码库 > css实现无(隐藏)滚动条页面
css实现无(隐藏)滚动条页面
实现功能:隐藏浏览器滚动条,且不影响鼠标滚轮滚动页面
适用:以大图片为背景或产品介绍页面(如果和视差滚动一起使用应该会效果更佳)
所需技术:非常简单的css和js
首先来看下对比效果(图1 => 图2,两者都能通过鼠标滚轮进行内容的滚动)
(图1)
(图2)
可以明显的看到:图2的正文宽度明显比图1的宽度小,并发生了向右的偏移。
这就是无滚动条页面的基本原理:移动(设置)正文的偏移量(margin/padding),使正文的滚动条出现在父节点可是范围的外面,以达到无滚动条的效果
代码实现
HTML节点可以分成3个层次:
窗口
| -容器
| -正文
如
然后经过简单的css设置就可以实现无滚动条的效果
窗口需要设置:overflow:hidden
容器需要设置:overflow-y:scroll, height(定高), margin(padding / relateiv+left 也行)
如果需要正文的宽度和浏览器宽度一致,则需要实时通过js计算浏览器的宽度,然后设置
容器的宽度 = 浏览器宽度 + 20px(一般浏览器滚动条的宽度)
(当然还有一些css细节地方,需要根据具体情况做调整)
TIP:使用这种方式隐藏滚动条后,onscroll事件不能在设置在window上了,而是在容器上设置
css实现无(隐藏)滚动条页面
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。