vue.js-div滚动条隐藏但有滚动效果的实现方法

 更新时间:2018年03月03日 10:03:37   作者:missing_IT   我要评论
下面小编就为大家分享一篇vue.js-div滚动条隐藏但有滚动效果的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

组件被包在一个高度固定的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滚动条隐藏但有滚动效果的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • 谈谈对vue响应式数据更新的误解

    谈谈对vue响应式数据更新的误解

    本篇文章主要介绍了谈谈对vue响应式数据更新的误解,深入了解了vue响应式数据,有兴趣的可以了解一下
    2017-08-08
  • vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

    vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用

    这篇文章主要介绍了vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show,本文通过实例图文相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • Vue之Watcher源码解析(2)

    Vue之Watcher源码解析(2)

    这篇文章主要为大家详细介绍了Vue源码之Watcher的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue如何实现observer和watcher源码解析

    vue如何实现observer和watcher源码解析

    这篇文章主要为大家详细介绍了vue如何实现observer和watcher源码的相关资料,分析vue的observe实现源码,聊聊如何一步一步实现$watch,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue.js前后端数据交互之提交数据操作详解

    vue.js前后端数据交互之提交数据操作详解

    这篇文章主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下
    2018-04-04
  • Vue Element使用icon图标教程详解(第三方)

    Vue Element使用icon图标教程详解(第三方)

    element-ui自带的图标库不够全,还是需要需要引入第三方icon。下面小编给大家带来了Vue Element使用icon图标教程,感兴趣的朋友一起看看吧
    2018-02-02
  • vue element项目引入icon图标的方法

    vue element项目引入icon图标的方法

    这篇文章主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下
    2018-06-06
  • Vue表单输入绑定的示例代码

    Vue表单输入绑定的示例代码

    这篇文章主要介绍了Vue表单输入绑定的示例代码,本文使用v-model指令在表单input创建双向数据绑定,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • 实例分析编写vue组件方法

    实例分析编写vue组件方法

    在本篇文章中我们给大家总结了关于编写vue组件的方法知识点,有此需要的读者们跟着学习下。
    2019-02-02
  • 基于vuejs+webpack的日期选择插件

    基于vuejs+webpack的日期选择插件

    这篇文章主要为大家详细介绍了基于vuejs+webpack的日期选择插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论