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 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
微信开发 微信授权详解
Oct 21 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
用js遍历 table的脚本
2008/07/23 Javascript
Cookie 小记
2010/04/01 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
2014年国培研修感言
2014/03/09 职场文书
求职意向书范文
2014/04/01 职场文书
小学庆六一活动总结
2014/08/28 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
房屋维修申请报告
2015/05/18 职场文书
民事上诉状范文
2015/05/22 职场文书
贴吧吧主申请感言
2015/08/03 职场文书