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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
vue与django集成打包的实现方法
Nov 11 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 Javascript
小程序实现文字循环滚动动画
Jun 14 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如何解决网站大流量与高并发的问题
2011/06/25 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
Prototype Object对象 学习
2009/07/12 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
Python递归函数特点及原理解析
2020/03/04 Python
python实现一个猜拳游戏
2020/04/05 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
如何安装ruby on rails
2014/02/09 面试题
高中生自我评价个人范文
2013/11/09 职场文书
专科生就业求职信
2014/06/22 职场文书
服务宗旨标语
2014/07/01 职场文书
租房安全协议书
2014/08/20 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS