輪事件：滾輪

滾動(卷動)事件：滾輪、拖拽滾動條、鍵盤方向鍵

<script type="text/javascript">
//滾輪事件：滾輪
//卷動事件：滾輪、拖拽滾動條、鍵盤?鍵

//IE和Chrome
gunlun.onmousewheel = function(){
this.innerHTML += "IE和Chrome<br/>";
}
//Firefox
gunlun.addEventListener("DOMMouseScroll", function(){
this.innerHTML += "Firefox<br/>";
})
</script>

判斷滾輪方向

<script type="text/javascript">
//滾輪事件：滾輪
//卷動事件：滾輪、拖拽滾動條、鍵盤?鍵

//IE和Chrome
gunlun.onmousewheel = function(e){
var ev = e || window.event;
console.log(ev.wheelDelta);//判斷滾輪方向的
//上120
//下-120

this.innerHTML += "IE和Chrome<br/>";
}
//Firefox
gunlun.addEventListener("DOMMouseScroll",function(e){
var ev = e || window.event;
console.log(ev.detail);//滾輪方向
//上-3
//下3
this.innerHTML += "Firefox<br/>";
})
</script>

兼容性封裝

SS 禁止瀏覽器滾動條的方法(轉)

1、完全隱藏 在<boby>里加入scroll="no", 可隱藏滾動條；

<boby scroll="no">

這個我用的時候完全沒效果, 不知道是什么原因! 不過好多人說這么用可以, 大概是用的位置不一樣吧

2、在不需要時隱藏 指當瀏覽器窗口寬度或高度大于頁面的寬或高時, 不顯示滾動條；反之, 則顯示:

<boby scroll="auto">

3、樣式表方法 在<boby>里加入style="overflow-x:hidden", 可隱藏水平滾動條；加入style="overflow-y:hidden", 可隱藏垂直滾動條。

被包含頁面里加入 <style> html { overflow-x:hidden; } </style> 有一段解釋是這樣說的：body{ overflow-x:hidden; }在標準 DTD 下是不可以的

我的問題是用這段代碼解決的body{overflow-y:hidden; }

4、另一種方法

<style type="text/css"> html { overflow-x:hidden; overflow-y:hidden; } </style>

5、在用ie6瀏覽有框架的xhtml頁面的時候, 默認會水平和垂直滾動條會一起出現, 這是ie6的一個bug, 在firefox上是正常的, 出現的原因是其對XHTML 1.0 transitional doctype的解釋缺陷.

對于這個bug一般有3種解決方案，

方法1: 代碼：

html { overflow-y: scroll; }

原理：強制顯示ie的垂直滾動條，而忽略水平滾動條 優點：完全解決了這個問題, 允許你保持完整的XHTML doctype.

缺點：即使頁面不需要垂直滾動條的時候也會出現垂直滾動條。

方法2: 代碼：

html { overflow-x: hidden; overflow-y: auto; }

原理：隱藏橫向滾動，垂直滾動根據內容自適應

優點：在視覺上解決了這個問題.在不必要的時候, 未強制垂直滾動條出現.

缺點：只是隱藏了水平滾動條，如果頁面真正需要水平滾動條的時候， 屏幕以外的內容會因為用戶無法水平滾動，而看不到。

方法3: 代碼：

body { margin-right: -15px; margin-bottom: -15px; }

原理：這會在margin的水平和垂直方向上添加一個負值, IE添加了該精確數值后, 便會去除對滾動條的需求假象.

優點：在視覺上解決了這個問題, 垂直滾動根據內容自適應

缺點：由于"人為創建"了15px的外邊距(margin), 所以無法使用該填充過的屏幕區域