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


Posted in Javascript onMarch 03, 2018

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

Javascript 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 #Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 #Javascript
js操作二进制数据方法
Mar 03 #Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 #Javascript
Vue的轮播图组件实现方法
Mar 03 #Javascript
在Vue中使用Compass的方法
Mar 02 #Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 #Javascript
You might like
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
css图片自适应大小
2007/11/28 Javascript
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
幼师求职信
2014/06/23 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
让世界充满爱观后感
2015/06/10 职场文书
2015入党自传书范文
2015/06/26 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python