一.情景

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

二.思路

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

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

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

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)了滾動條隱藏且能滾動

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

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

而FireFox滾動事件DOMMouseScroll，判斷滾動屬性為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原生监听滚动条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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