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

demo: http://runjs.cn/detail/rrpg7mwb(模块无滚动条)

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


首先来看下对比效果(图1 => 图2,两者都能通过鼠标滚轮进行内容的滚动)


javascript页面无滚动条 css无滚动条滚动_无滚动条


(图1)


javascript页面无滚动条 css无滚动条滚动_html_02


(图2)


可以明显的看到:图2的正文宽度明显比图1的宽度小,并发生了向右的偏移。

这就是无滚动条页面的基本原理:移动(设置)正文的偏移量(margin/padding),使正文的滚动条出现在父节点可是范围的外面,以达到无滚动条的效果


代码实现

HTML节点可以分成3个层次:


窗口

 | -容器

      | -正文          


javascript页面无滚动条 css无滚动条滚动_实时计算_03



然后经过简单的css设置就可以实现无滚动条的效果

javascript页面无滚动条 css无滚动条滚动_实时计算_04

窗口需要设置:overflow:hidden


javascript页面无滚动条 css无滚动条滚动_实时计算_05

容器需要设置:overflow-y:scroll, height(定高), margin(padding / relateiv+left 也行)

javascript页面无滚动条 css无滚动条滚动_html_06



如果需要正文的宽度和浏览器宽度一致,则需要实时通过js计算浏览器的宽度,然后设置

容器的宽度 = 浏览器宽度 + 20px(一般浏览器滚动条的宽度)

(当然还有一些css细节地方,需要根据具体情况做调整)


TIP:使用这种方式隐藏滚动条后,onscroll事件不能在设置在window上了,而是在容器上设置