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不同页面传值的改进版
Sep 30 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
在create-react-app中使用sass的方法示例
Oct 01 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 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
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP 类与构造函数解析
2017/02/06 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
python追加元素到列表的方法
2015/07/28 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
临床医学大学生求职信
2013/09/28 职场文书
教师实习期自我鉴定
2013/10/06 职场文书
建筑工程专业毕业生自荐信
2013/10/19 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
培训师岗位职责
2015/02/14 职场文书
夏洛特的网观后感
2015/06/15 职场文书
小学庆六一主持词
2015/06/30 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
三下乡活动心得体会
2016/01/23 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android