Home  >  Article  >  Web Front-end  >  How to use div scroll bar to hide but have scrolling effect in vue.js?

How to use div scroll bar to hide but have scrolling effect in vue.js?

亚连
亚连Original
2018-06-01 16:20:373823browse

Below I will share with you an implementation method of hiding the vue.js-p scroll bar but having a scrolling effect. It has a good reference value and I hope it will be helpful to everyone.

The components are wrapped in a fixed height p

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

The above is what I organized For everyone, I hope it will be helpful to everyone in the future.

Related articles:

js css to achieve typing effect

##vue.js project nginx deployment tutorial

A brief introduction to the use of react redux middleware


##

The above is the detailed content of How to use div scroll bar to hide but have scrolling effect in vue.js?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn