一.情景

需求：頁(yè)面中間某個(gè)部分能隨著鼠標(biāo)滾動(dòng)而滾動(dòng)，且不顯示滾動(dòng)條。

二.思路

如果只是考慮webkit內(nèi)核那就沒(méi)說(shuō)的了，有css屬性可以設(shè)置。但往往只有移動(dòng)端開(kāi)發(fā)才能這么霸道

今天說(shuō)的是兼容IE/Chrome/FireFox等主流瀏覽器的做法。

你需要三個(gè)div即可實(shí)現(xiàn)，最外層div設(shè)置你需要顯示的高寬以及overflow為hidden，第二層設(shè)置overflow-x。并將其寬度設(shè)置來(lái)超出最外層div，這樣咱們的滾動(dòng)條就會(huì)被在外層div所擋住，也就間接隱藏了滾動(dòng)條也能滾動(dòng)

code

Document

* {

margin: 0;

padding: 0;

}

body {

font: 14px/1.8 'Microsoft YaHei', '微軟雅黑';

color: #ffffff;

text-align: center;

}

.content {

width: 947px;

height: 543px;

margin: 98px auto 0;

position: relative;

overflow: hidden;

}

.content-outer {

width: 968px;

height: 543px;

overflow-x: hidden;

overflow-y: auto;

}

以上便實(shí)現(xiàn)了滾動(dòng)條隱藏且能滾動(dòng)

三.監(jiān)聽(tīng)鼠標(biāo)滾輪事件

這里IE/Chrome的用法是一致的，滾動(dòng)事件onmousewheel，判斷滾動(dòng)屬性為e.wheelDelta，且向上滾動(dòng)是+120，向下是-120

而FireFox滾動(dòng)事件DOMMouseScroll，判斷滾動(dòng)屬性為e.detail，且向上是-3，向下是+3

這里需要兼容處理一下下。

var Fun= function(e) {

var e = e || window.event;

if (e.wheelDelta) {

//IE/Opera/Chrome

console.log(e.wheelDelta);

} else if (e.detail) {

//FireFox

console.log(e.detail);

}

}

if (document.addEventListener) {

document.addEventListener('DOMMouseScroll', Fun, false);

} //FireFox

window.onmousewheel = document.onmousewheel = Fun; //IE/Opera/Chrome

總結(jié)

以上是生活随笔為你收集整理的原生js监听滚动条_JS原生监听滚动条的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。