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 相关文章推荐
js验证表单大全
Nov 25 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
AngularJS内置指令
Feb 04 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 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设计模式之结构模式的深入解析
2013/06/13 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
php常用正则函数实例小结
2016/12/29 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
一个简单的jquery进度条示例
2014/04/28 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
javascript实现连续赋值
2015/08/10 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
Python 基础教程之包和类的用法
2017/02/23 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
高考考python编程是真的吗
2020/07/20 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
领导失职检讨书
2014/02/24 职场文书
小学语文教研活动总结
2014/07/01 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
交通事故协议书范文
2014/10/23 职场文书
化妆品促销活动总结
2015/05/07 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
python OpenCV学习笔记
2021/03/31 Python