BEX5下实现鼠标滚动滚动条
使用前提:
页面内容过多,默认的滚动条太难看,在不引入滚动条插件情况下让界面不使用滚动条,又能通过鼠标滚动
实现步骤:
1 在会出现滚动条的组件上设置隐藏滚动条
overflow:hidden;
2 在上述组件的bind-mouseenter(鼠标进入事件)增加滚动监听器
var num = 0;
var i = true;
Model.prototype.buttonGroup1Mouseenter = function(event){
var me = this; this.getElementByXid("buttonGroup1").addEventListener("mousewheel", function(e){ if(i||(num++)%5===0){ i = false;
if(e.wheelDelta>0){
up(me); // 向上滚动
}else{
down(me); //向下滚动
}
setTimeout(function(){
i=true;
num=0;
}, 300); } });
};
其中,当鼠标进行滚动时,每一下滚动都会触发滚动事件,这会造成代码的执行滞后于事件的触发,给人一种卡顿的感觉,并造成页面卡停,所以需要通过 i 变量来设置当一次事件代码执行完毕后才能执行下一次处理;但又想通过快速滚动鼠标让事件执行的快点,所以又加入了 num ,每滚动5次鼠标视为一次有效的触发,既可以通过鼠标滚动的快慢控制滚动的速度,也可以防止触发事件次数过多导致页面的卡顿。
3 实现滚动代码
// 向上滚动一次
var up = function(me){
var scroll = $(me.getElementByXid("buttonGroup1"))[0]; if(scroll.scrollTop-39>0){
scroll.scrollTop -=39;
}else{
scroll.scrollTop = 0;
} }; // 向下滚动一次
var down = function(me){
var scroll = $(me.getElementByXid("buttonGroup1"))[0];
var bottom = scroll.scrollHeight- scroll.offsetHeight; if(bottom-scroll.scrollTop>39){
scroll.scrollTop +=39;
}else{
scroll.scrollTop = bottom;
}
};
其中,me.getElementByXid("buttonGroup1")为1中设置了样式的组件对象,39为滚动一次移动的高度,我这里刚好跳过一个功能项,不至于只移动半个按钮
4 在绑定了事件监听器的组件的bind-mouseleave事件上移除监听器
Model.prototype.buttonGroup1Mouseleave = function(event){
this.getElementByXid("buttonGroup1").removeEventListener("mousewheel",function(){});
};
BEX5下实现鼠标滚动滚动条的更多相关文章
- IE11下使用fixed定位时鼠标滚动不平滑
很久不用IE了,近期做兼容性测试发现一个fixed定位的问题,当元素使用fixed定位时,其应该不随页面滚动,在chrome/firefox/edge下都很完美,元素完全不动,但是使用IE11时,如果 ...
- JavaScript判断鼠标滑轮是向下还是向上滚动
我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...
- 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
当我们的内容超出了我们的div,往往会出现滚动条,影响美观.尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...
- 纯css,div隐藏滚动条,保留鼠标滚动效果。
示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...
- 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)
回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...
- JavaScript一个鼠标滚动事件的实例
<script type="text/javascript" src="./whenReady.js"></script> <!- ...
- 通通玩blend美工(6)下——仿iPhone滚动选择器的ListBox(交互逻辑)
原文:通通玩blend美工(6)下--仿iPhone滚动选择器的ListBox(交互逻辑) 上一篇我们已经把界面画出来了,这篇我们就来制作交互的逻辑吧.上一篇的电梯: http://www.cnblo ...
- WIN7下vs2010滑轮滚动不正确的解决方法
win7下vs2010在滚动滑轮时文档滚动条不滚动而是解决方案的滚动条滚动的解决方法, 控制面板>设备和打印机>鼠标设置>滚轮选项卡里面将滚轮功能设置设为只使用office97预设的 ...
- wpf图片查看器,支持鼠标滚动缩放拖拽
最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...
随机推荐
- Java开发笔记(二十六)方法的输出参数
前面介绍了方法的输入参数,与输入参数相对应的则为输出参数,输出参数也被称作方法的返回值,意思是经过方法的处理最终得到的运算数值.这个返回值可能是整型数,也可能是双精度数,也可能是数组等其它类型,甚至允 ...
- Java开发笔记(三十五)字符串格式化
前面介绍了字符串变量的四种赋值方式,对于简单的赋值来说完全够用了,即便是两个字符串拼接,也只需通过加号把两个目标串连起来即可.但对于复杂的赋值来说就麻烦了,假设现在需要拼接一个很长的字符串,字符串内部 ...
- 如何使用Dubbo 2.7.0和Spring boot实现FAT测试(Feature Acceptance Test)
在一个调用链非常长的功能中,如果想修改其中的一个特性,并进行测试,而又不影响该环境的其他用户使用现有功能.特性,例如: 1. A.B.C.D之间通过Dubbo实现远程调用 2. 这些模块可能有一个或者 ...
- mysql过程函数的建立与使用
记一次数据库函数的学习:工作中接口出现问题,导致页面数据显示错误,跟踪代码查看,最后找到sql语句中,但是sql比较复杂,同时调用了大量的函数,以此记录mysql函数的学习. 首先创建一个函数 选择参 ...
- 快速傅里叶变换(FFT)详解
本文只讨论FFT在信息学奥赛中的应用 文中内容均为个人理解,如有错误请指出,不胜感激 前言 先解释几个比较容易混淆的缩写吧 DFT:离散傅里叶变换—>$O(n^2)$计算多项式乘法 FFT:快速 ...
- 荣耀MagicBook黑苹果(i7)High Sierra 10.13.6
这里有大佬维护的新版本EFI,对应10.14.4:https://github.com/hjmmc/Honor-Magicbook ---------------------------------- ...
- Android中将一个图片切割成多个图片
有种场景,我们想将一个图片切割成多个图片.比如我们在开发一个拼图的游戏,就首先要对图片进行切割. 以下是封装好的两个类,可以实现图片的切割.仅供参考和学习. 一个是ImagePiece类,此类保存了一 ...
- 什么是基于风险的测试(RBT)?
基于风险的测试(Risk-based testing) 文/杨学明 一.基于风险的测试起源 基于风险的测试起源,在软件测试领域,基于风险测试最早的是测试大师Boris Beizer<软件测试技术 ...
- CentOS7 设置yum源
1.关闭防火墙 临时关闭防火墙 systemctl stop firewalld 永久防火墙开机自关闭 systemctl disable firewalld 临时打开防火墙 systemctl st ...
- c/c++ linux 进程间通信系列7,使用pthread mutex
linux 进程间通信系列7,使用pthread mutex #include <stdio.h> #include <stdlib.h> #include <unist ...