js監聽html頁面的上下滾動事件

阿新 • • 發佈：2019-01-17

最近在一個專案中，在寫前端頁面的時候，想像以前做Android時在頁面時刻監聽上下滾動的事件，查詢資料發現由滑鼠或類似使用者動作觸發的事件有以下圖示：

這裡寫圖片描述

不多說了，直接上程式碼了，經過測試可以使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Dome</title>
        <script type="text/javascript">  

            function 
 scroll(){
                //console.log("列印log日誌");實時看下效果
                console.log("開始滾動！");
            }

            var scrollFunc = function (e) {  
                e = e || window.event;  
                if (e.wheelDelta) {  //第一步：先判斷瀏覽器IE，谷歌滑輪事件               
                    if (e.wheelDelta > 0 
) { //當滑輪向上滾動時  
                        console.log("滑輪向上滾動");  
                    }  
                    if (e.wheelDelta < 0) { //當滑輪向下滾動時  
                        console.log("滑輪向下滾動");  
                    }  
                } else if (e.detail) {  //Firefox滑輪事件  
                    if (e.detail> 0 
) { //當滑輪向上滾動時  
                        console.log("滑輪向上滾動");  
                    }  
                    if (e.detail< 0) { //當滑輪向下滾動時  
                        console.log("滑輪向下滾動");  
                    }  
                }  
            }
            //給頁面繫結滑輪滾動事件  
            if (document.addEventListener) {//firefox  
                document.addEventListener('DOMMouseScroll', scrollFunc, false);  
            }  
            //滾動滑輪觸發scrollFunc方法  //ie 谷歌  
            window.onmousewheel = document.onmousewheel = scrollFunc;



        </script>  

    </head>
    <body onscroll="scroll()">
        <div style="height: 2000px;background-color: aqua;"></div>
    </body>
</html>

如果有沒有使用過console.log(“”)的，我這裡截下圖看下吧（谷歌瀏覽器）：
這裡寫圖片描述

有什麼問題可以加我的群問：472148690

js監聽html頁面的上下滾動事件

最近在一個專案中，在寫前端頁面的時候，想像以前做Android時在頁面時刻監聽上下滾動的事件，查詢資料發現由滑鼠或類似使用者動作觸發的事件有以下圖示：不多說了，直接上程式碼了，經過測試可以使用： <!DOCTYPE html> <

【浮動導航欄的定位】JS監聽動態頁面元素距離底部距離，並修改定位樣式

需求：一個定位position:fixed;的選單欄，移動到底部時依然存在，影響頁面美觀，我們希望當滾輪移到頁面末尾時選單欄更換為絕對定位。解決：JS沒有直接獲取元素距離頁面底部距離的函式，因此可利用全文高度-當前高度取得差值來間接判斷。 <!DOCTYPE html

監聽html頁面是否可見手機切屏切應用可用

有時候需要監聽使用者是否還在檢視頁面一些常用的方法無法在切屏最小化等情況下完成監聽此方法可監聽頁面可見性 document.addEventListener('visibilitychange', function () { // 使用者離開了當

js監聽瀏覽器切換標籤欄事件

var OriginTitile = document.title, titleTime document.addEventListener('visibilitychange', function() { if (document.hidden) {

js監聽輸入框內容變化事件

如果你在實現“統計input、textarea文字框輸入字數”中遇到問題，閱讀本文或許可以幫助你解決這個棘手的問題！手機頁面開發，要統計textareal文字框輸入字數，使用onkeyup雖然可以監聽到輸入框的文字字數變化，但在iphone下有個問題：

iOS監聽H5頁面goBack返回事件問題

本部落格遷移來自：http://www.jianshu.com/users/465865c268ed/latest_articles 從native直接push到一個webView頁面，隱藏navig

JS 監聽瀏覽器的回退事件 [二〇一八年九月二十五日]

從網上找了點資源都比較少的 . 我找到了兩種方法: <script type="text/javascript"> //加入以下倆行程式碼，才能觸發 window.history.pushState('forward', null, '#'); wind

JS監聽頁面滾動到底部事件

his div span 頁面 == nbsp scroll win cnblogs 廢話不說，直接上代碼，放心我這個是最好的,直接放到js腳本裏，直接生效: $(window).scroll(function(){ var scrollTo

react.js 監聽頁面滾動事件

componentDidMount() { window.addEventListener('scroll', this.handleScroll); } handleScroll=(event)=>{ //滾動條高度 let ctx=this;

js 監聽後退事件及跳轉頁面

gpo post script log push pan rip var pre //直接跳轉 window.location.href="b.html"; //返回上一級頁面 window.history.back(-1); //返回下一級頁面 window.his

js監聽PC/手機/微信瀏覽器後退按鈕事件，可跳轉到指定頁面；

$(document).ready(function (e) { var counter = 0; if (window.history && window.history.pushState) {

js監聽滾動條事件和獲取瀏覽器及螢幕高度和寬度等資訊的方法

<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-sc

jq監聽頁面的滾動事件，

大於 var style function query scrollto () document size jQuery監聽頁面的滾動狀態，實現代碼： $(document).scroll(function() { var scroH = $(doc

JS監聽checkbox的選擇獲取取消事件代碼案列

事件 onclick att 選中 types bsp put color type function OncheckBox(index){ if ($(index).attr("checked") == "checked") { alert($(ind

js監聽瀏覽器返回事件

tlist cat blog eve class IT sta OS stat $(function(){ pushHistory(); window.addEventListener("popstate", function(e) { w

JS監聽頁面----無鼠標鍵盤動作，自動跳頁

bsp .proto baidu screen ati event nbsp span onload function ScreenSaver(settings){ this.settings = settings;

js監聽鍵盤事件

code key inf 回車事件 amp button pre 圖片 function 1、監聽全局鍵盤按下事件，例如監聽全局回車事件 1　　$(document).keydown(function(event){ 2　　　　if(event.keyCode

JS監聽微信、支付寶等移動app及瀏覽器的返回、後退、上一頁按鈕的事件方法

on() 移動app 自己的 win 功能監聽 ner tor event $(function(){ pushHistory(); window.addEventListener("popstate", function(e) { alert("我監聽到

JS監聽手機端瀏覽器的後退按鈕的事件方法

轉載地址：http://www.jb51.net/article/89921.htm 首先我們要了解瀏覽器的history。大家知道在頁面中我們可以使用javascript window history，後退到前面頁面，但是由於安全原因javascript不允許修改his

js監聽瀏覽器關閉事件(區分重新整理和關閉,相容IE9,10,11,Edge，Chrome和Firefox)

由於各瀏覽器相容性不同，所以首先要先區分各瀏覽器 var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串 var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Oper

js監聽html頁面的上下滾動事件

相關推薦