css实现无(隐藏)滚动条页面

猪小花1号2018-08-23 17:17

实现功能:隐藏浏览器滚动条,且不影响鼠标滚轮滚动页面
适用:以大图片为背景或产品介绍页面(如果和视差滚动一起使用应该会效果更佳
所需技术:非常简单的css和js
demo:

http://runjs.cn/detail/rrpg7mwb(模块无滚动条)
http://runjs.cn/detail/5dw0hqvi全屏无滚动条,其中宽度需要根据resize事件实时计算,demo里暂时写死

首先来看下对比效果(图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上了,而是在容器上设置


网易云新用户大礼包:https://www.163yun.com/gift

本文来自网易实践者社区,经作者蒋仁授权发布。