欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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控制Session操作方法

    JavaScript控制Session操作方法

    JavaScript代表客戶端,而Session代表的是服務(wù)器(不知道這樣說大家是否能夠理解)接下來介紹JavaScript如何控制Session,感興趣的朋友可以了解下啊
    2013-01-01
  • JS實現(xiàn)放大鏡效果

    JS實現(xiàn)放大鏡效果

    這篇文章主要為大家詳細介紹了JS實現(xiàn)放大鏡效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • JS基于貪心算法解決背包問題示例

    JS基于貪心算法解決背包問題示例

    這篇文章主要介紹了JS基于貪心算法解決背包問題,簡單說明了貪心算法的概念、原理,并結(jié)合具體實例形式分析了JS使用貪心算法解決部分背包問題的具體操作技巧,需要的朋友可以參考下
    2017-11-11
  • js實現(xiàn)簡單的無縫輪播效果

    js實現(xiàn)簡單的無縫輪播效果

    這篇文章主要為大家詳細介紹了js實現(xiàn)簡單的無縫輪播效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • 微信小程序收貨地址API兼容低版本解決方法

    微信小程序收貨地址API兼容低版本解決方法

    這篇文章主要介紹了微信小程序收貨地址API兼容低版本解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • javascript-解決mongoose數(shù)據(jù)查詢的異步操作

    javascript-解決mongoose數(shù)據(jù)查詢的異步操作

    這篇文章主要介紹了javascript-解決mongoose數(shù)據(jù)查詢的異步操作,具有一定的參考價值,有興趣的可以了解一下。
    2016-12-12
  • Spring Boot+AngularJS+BootStrap實現(xiàn)進度條示例代碼

    Spring Boot+AngularJS+BootStrap實現(xiàn)進度條示例代碼

    一般上傳文件時都需要進度條,本篇文章主要介紹了Spring Boot+AngularJS+BootStrap實現(xiàn)進度條示例代碼,有興趣的可以了解一下。
    2017-03-03
  • TypeScript?泛型重載函數(shù)的使用方式

    TypeScript?泛型重載函數(shù)的使用方式

    這篇文章主要介紹了TypeScript?泛型重載函數(shù)的使用方式,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-08-08
  • JS使用Date對象實時顯示當前系統(tǒng)時間簡單示例

    JS使用Date對象實時顯示當前系統(tǒng)時間簡單示例

    這篇文章主要介紹了JS使用Date對象實時顯示當前系統(tǒng)時間,涉及javascript基于定時器動態(tài)操作Date對象相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2018-08-08
  • uni-app實現(xiàn)點贊評論功能

    uni-app實現(xiàn)點贊評論功能

    這篇文章主要介紹了uni-app實現(xiàn)點贊評論功能,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11

最新評論