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 白痴级入门教程
Nov 11 Javascript
javascript call方法使用说明
Jan 11 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
vue路由跳转传参数的方法
May 06 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下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
电大自我鉴定
2013/10/27 职场文书
商场消防管理制度
2014/01/12 职场文书
班长演讲稿范文
2014/04/24 职场文书
优秀员工评优方案
2014/06/13 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
2016银行求职自荐信
2016/01/28 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS