js實現(xiàn)鼠標滑動到某個div禁止?jié)L動
更新時間:2020年09月17日 10:32:40 作者:劉老實1528
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標滑動到某個div禁止?jié)L動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)鼠標滑動到某個div禁止?jié)L動的具體代碼,供大家參考,具體內(nèi)容如下
項目中碰到一個場景就是當鼠標滑倒某個div的時候,滑動鼠標頁面不再滾動。
這里主要是當鼠標滑動到該div時,監(jiān)聽滾輪事件并通過preventDefault()事件來阻止?jié)L動事件,以下是例子
eg:
#wrap { position:absolute; top:200px; background:#000000; font-size: 40px; width:50vw; text-align: center; color: #ffffff; line-height: 300px; height:300px; }
<div id="wrap"> 鼠標移動進入該區(qū)域,頁面禁止?jié)L動 </div>
window.onload = function () { for (i = 0; i < 50; i++) { var x = document.createElement('div'); x.innerHTML = "test<br/>"; document.body.appendChild(x); } function $(x) { return document.getElementById(x); }; $("wrap").onmousewheel = function scrollWheel(e) { var sl; e = e || window.event; if (navigator.userAgent.toLowerCase().indexOf('msie') >= 0) { event.returnValue = false; } else { e.preventDefault(); }; }; if (navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) { //firefox支持onmousewheel addEventListener('DOMMouseScroll', function (e) { var obj = e.target; var onmousewheel; while (obj) { onmousewheel = obj.getAttribute('onmousewheel') || obj.onmousewheel; if (onmousewheel) break; if (obj.tagName == 'BODY') break; obj = obj.parentNode; }; if (onmousewheel) { if (e.preventDefault) e.preventDefault(); e.returnValue = false; //禁止頁面滾動 if (typeof obj.onmousewheel != 'function') { //將onmousewheel轉(zhuǎn)換成function eval('window._tmpFun = function(event){' + onmousewheel + '}'); obj.onmousewheel = window._tmpFun; window._tmpFun = null; }; // 不直接執(zhí)行是因為若onmousewheel(e)運行時間較長的話,會導(dǎo)致鎖定滾動失效,使用setTimeout可避免 setTimeout(function () { obj.onmousewheel(e); }, 1); }; }, false); }; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript-解決mongoose數(shù)據(jù)查詢的異步操作
這篇文章主要介紹了javascript-解決mongoose數(shù)據(jù)查詢的異步操作,具有一定的參考價值,有興趣的可以了解一下。2016-12-12Spring Boot+AngularJS+BootStrap實現(xiàn)進度條示例代碼
一般上傳文件時都需要進度條,本篇文章主要介紹了Spring Boot+AngularJS+BootStrap實現(xiàn)進度條示例代碼,有興趣的可以了解一下。2017-03-03JS使用Date對象實時顯示當前系統(tǒng)時間簡單示例
這篇文章主要介紹了JS使用Date對象實時顯示當前系統(tǒng)時間,涉及javascript基于定時器動態(tài)操作Date對象相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-08-08