vue.js-div滾動條隱藏但有滾動效果的實(shí)現(xiàn)方法

更新時(shí)間：2018年03月03日 10:03:37 作者：missing_IT

下面小編就為大家分享一篇vue.js-div滾動條隱藏但有滾動效果的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

組件被包在一個(gè)高度固定的div

mounted () {
  var boDiv = document.getElementById(this.id);
  if(boDiv == undefined){
  return;
  }
  var isFirefox=navigator.userAgent.indexOf("Firefox") 
  if(isFirefox>0){ 
  boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐
   var evt = window.event || arguments[0]
   if (evt.detail <= -3) { 
   boDiv.scrollTop=boDiv.scrollTop-10
   } else if (evt.detail >= 3) {
   boDiv.scrollTop=boDiv.scrollTop+10
   }
   evt.stopPropagation();
   evt.preventDefault();
  }, false); 
  }else{
  boDiv.addEventListener("mousewheel",function(event) {
   var evt = window.event || arguments[0]
   evt.returnValue = false //屏蔽body滾動事件 
   if (evt.wheelDelta <= -120) { 
   boDiv.scrollTop=boDiv.scrollTop+40
   } else if (evt.wheelDelta >= 120) {
   boDiv.scrollTop=boDiv.scrollTop-40
   }
  })
  } 
 }
 }

以上這篇vue.js-div滾動條隱藏但有滾動效果的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中選中多個(gè)選項(xiàng)并且改變選中的樣式的實(shí)例代碼
這篇文章主要介紹了vue中選中多個(gè)選項(xiàng)并且改變選中的樣式，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-09-09
HBuilder導(dǎo)入vue項(xiàng)目并通過域名訪問的過程詳解
這篇文章主要介紹了HBuilder導(dǎo)入vue項(xiàng)目并通過域名訪問,一般情況下運(yùn)行vue項(xiàng)目需要安裝node.js，通過npm命令來安裝vue組件和運(yùn)行vue項(xiàng)目，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-05-05
vue指令防止按鈕連點(diǎn)解析
這篇文章主要介紹了vue指令防止按鈕連點(diǎn)解析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
淺析vue中$nextTick的作用與原理
這篇文章主要為大家詳細(xì)介紹一下Vue中$nextTick的作用于原理,這也是面試中常常考到的問題,文中的示例代碼講解詳細(xì),對我們深入了解Vue有一定的幫助,需要的小伙伴可以參考一下
2023-10-10
vue todo-list組件發(fā)布到npm上的方法
這篇文章主要介紹了vue todo-list組件發(fā)布到npm上的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
Vue2.0組件間數(shù)據(jù)傳遞示例
本篇文章主要介紹了Vue2.0組件間數(shù)據(jù)傳遞示例，組件間數(shù)據(jù)傳遞主要是父子組件之間傳遞，具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-03-03
前端架構(gòu)vue架構(gòu)插槽slot使用教程
這篇文章主要為大家介紹了前端vue架構(gòu)插槽slot使用教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-02-02
Vue?設(shè)置圖片不轉(zhuǎn)為base64的方式
這篇文章主要介紹了Vue實(shí)現(xiàn)設(shè)置圖片不轉(zhuǎn)為base64的方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-02-02
vue項(xiàng)目接入高德地圖點(diǎn)擊地圖獲取經(jīng)緯度以及省市區(qū)功能
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目接入高德地圖點(diǎn)擊地圖獲取經(jīng)緯度以及省市區(qū)功能的相關(guān)資料,開發(fā)中我們需要地圖定位,就是用戶輸入位置,自動定位獲取經(jīng)緯度,需要的朋友可以參考下
2023-08-08
vue登錄成功之后的token處理詳細(xì)步驟
Token是身份驗(yàn)證后服務(wù)端返回的令牌,常用于訪問授權(quán)API和頁面權(quán)限校驗(yàn),Token數(shù)據(jù)可存儲在本地或Vuex中,本地存儲可實(shí)現(xiàn)數(shù)據(jù)持久化,這篇文章主要介紹了vue登錄成功之后的token處理詳細(xì)步驟,需要的朋友可以參考下
2024-10-10