javascript 学习之自定义滚动条加滚轮事件
要自己写一个自定义滚动条加上滚轮事件，之前的没有滚轮事件不完整，今天整理了一个。
1.滚轮事件是不兼容的，firefox中是必需要用事件绑定的添加，用的DOMMouseScroll，当滚动鼠标的时候，只要鼠标滚动的方法就行了，而这通过检测datail的正负号就可以确定
2.其他的用mousewheel(Ie是onmousewheel),通过检测wheelDelta
<!doctype html>
<html>
<head>
<title>拖拽-加滚轮</title>
<style>
.main{ width: 300px; height: 400px; background: #ccc; margin: 10px auto;overflow: hidden;}
.main-content{width: 300px; position: relative; height: 400px; overflow: hidden;}
.main-content-c{width: 280px; background: #0F9932; position: absolute; top: 0;}
.target{width: 20px; background: #eee;height: 400px; position: absolute; top: 0;right: 0;}
.bar{width: 20px;min-height: 10px; background: #333;border-radius: 10px; position: absolute; top: 0;}
</style>
<script>
window.onload= function(){
var oContent = document.getElementById("content");
var oTxt = getByClass(oContent,"main-content-c")[0];
var oTarg = getByClass(oContent,"target")[0];
var oBar = getByClass(oContent,"bar")[0]; oBar.style.height = oTarg.offsetHeight*(oContent.offsetHeight/oTxt.offsetHeight)+'px'; oBar.onmousedown = function(ev){
var oEvent = ev || event;
var disY = oEvent.clientY - oBar.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev || event;
var t = oEvent.clientY - disY;
setPos(t);
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null; oBar.releaseCapture && oBar.releaseCapture();
}
oBar.setCapture && oBar.setCapture();
oEvent.preventDefault && oEvent.preventDefault();
return false;
}
function setPos(t){
if(t<0){
t =0;
}else if(t>oTarg.offsetHeight-oBar.offsetHeight){
t = oTarg.offsetHeight-oBar.offsetHeight;
}
oBar.style.top = t+'px'; var scale = t/(oTarg.offsetHeight-oBar.offsetHeight);
oTxt.style.top = -scale*(oTxt.offsetHeight-oContent.offsetHeight)+'px'; } addMouseWheel(oContent,function(down){
var t = oBar.offsetTop;
if(down){
t +=10;
}else{
t -=10;
}
setPos(t);
}); } function getByClass(oParent,sClass){
if(oParent.getElementsByClassName){
return oParent.getElementsByClassName(sClass);
}
var aEle = oParent.getElementsByTagName("*");
var aRes = [];
var reg = new RegExp('\\b'+sClass+'\\b');
for(var i=0;i<aEle.length;i++){
if(reg.test(aEle[i].className)){
aRes.push(aEle[i]);
}
}
return aEle;
}
function addMouseWheel(obj,fn){
function fnWhell(ev){
var oEvent = ev || event;
var bDown = false; bDown = oEvent.wheelDelta ? oEvent.wheelDelta<0 : oEvent.detail>0; fn && fn(bDown,oEvent);
oEvent.preventDefault && oEvent.preventDefault();
return false;
}
if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1){
obj.addEventListener("DOMMouseScroll",fnWhell,false);
}else{
addEvent(obj,'mousewheel',fnWhell);
}
}
function addEvent(obj,sEv,fn){
if(obj.addEventListener){
obj.addEventListener(sEv,fn,false);
}else{
obj.attachEvent('on'+sEv,fn);
}
}
</script>
</head>
<body>
<div class="main">
<div class="main-content" id="content">
<div class="main-content-c">
正当我伸伸懒腰，打算上个厕所的时候，突然想到一件事情：如果模块越来越多，那么多文件都要分开加载？那岂不严重影响性能！？（啥，你不知道为啥？）
要压缩合并JavaScript呀！于是，我强忍住那股液体，开始用YUICompressor来压缩，并手动合并了两个文件。
这里就不展示结果了，因为很蛋疼，完全对不住我刚才忍住液体的勇气！结果当然是，失败。
为什么会失败呢？自己想了想，同时打开压缩后的代码一看，才发现原因：
压缩后之后，require变量变成了a变量。SeaJS是通过require字面来判断模块之间的依赖关系的，所以，require变量不能被简化。 嗯，SeaJS已经替我们想到了这个问题，于是我们就采用SeaJS提供的方式来合并压缩吧（当然你也可以自己用别的方式压缩）。
SeaJS在2.0之前，是采用SPM作为压缩合并工具的，到了2.0，改为Grunt.js，SPM变为包管理工具，类似NPM（不知道NPM？Google一下吧） 自动化不仅是科技带给社会的便利，也是Grunt带给前端的瑞士军刀。使用Grunt，可以很方便的定制各种任务，如压缩、合并等。使用Grunt之前，需要安装node环境和grunt工具，Google一下，十分钟后回来。
…… Grunt最核心的就两个部分，package.json、Gruntfile.js。 a. package.json
Grunt把一个项目/目录视为一个npm模块，package.json就是用来描述这个模块的信息，包括name、version、author等等。
这里强调一下，Grunt既然将该目录视为一个模块，那么该模块当然可以依赖其他模块。
我们看本示例的：
正当我伸伸懒腰，打算上个厕所的时候，突然想到一件事情：如果模块越来越多，那么多文件都要分开加载？那岂不严重影响性能！？（啥，你不知道为啥？）
要压缩合并JavaScript呀！于是，我强忍住那股液体，开始用YUICompressor来压缩，并手动合并了两个文件。
这里就不展示结果了，因为很蛋疼，完全对不住我刚才忍住液体的勇气！结果当然是，失败。
为什么会失败呢？自己想了想，同时打开压缩后的代码一看，才发现原因：
压缩后之后，require变量变成了a变量。SeaJS是通过require字面来判断模块之间的依赖关系的，所以，require变量不能被简化。 嗯，SeaJS已经替我们想到了这个问题，于是我们就采用SeaJS提供的方式来合并压缩吧（当然你也可以自己用别的方式压缩）。
SeaJS在2.0之前，是采用SPM作为压缩合并工具的，到了2.0，改为Grunt.js，SPM变为包管理工具，类似NPM（不知道NPM？Google一下吧） 自动化不仅是科技带给社会的便利，也是Grunt带给前端的瑞士军刀。使用Grunt，可以很方便的定制各种任务，如压缩、合并等。使用Grunt之前，需要安装node环境和grunt工具，Google一下，十分钟后回来。
…… Grunt最核心的就两个部分，package.json、Gruntfile.js。 a. package.json
Grunt把一个项目/目录视为一个npm模块，package.json就是用来描述这个模块的信息，包括name、version、author等等。
这里强调一下，Grunt既然将该目录视为一个模块，那么该模块当然可以依赖其他模块。
我们看本示例的：
</div>
<div class="target">
<div class="bar"></div>
</div>
</div>
</div>
</body>
</html>
javascript 学习之自定义滚动条加滚轮事件的更多相关文章
- JavaScript学习笔记- 自定义滚动条插件
此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...
- JavaScript学习笔记-自定义滚动条
这是一个基本实现思路,如果有新手和我一样没什么事,喜欢瞎研究话,可以参考下. 一.Html <div class="scroll_con"> <div class ...
- JavaScript学习日志（六）：事件
这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!! ...
- js 页面无滚动条添加滚轮事件
当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...
- JAVAscript学习笔记 js句柄监听事件 第四节 （原创） 参考js使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript学习之带滚动条的图片
之前找了好久没有找到,就自已动手写了一个: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- JavaScript学习笔记-自定义集合类
//集合类Set( ES6标准才有的类,目前兼容性较差)//自定义集合类:extend = function (o,p){ //定义一个复制对象属性的类函数 for(var x in p){ o[x] ...
- javascript学习笔记（七）：事件详解
HTML事件处理 <!DOCTYPE html> <html> <head lang="en"> <meta chaset="U ...
- web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解
1.JS事件详解-事件流 1.1.事件流 1.事件流: 描述的是在页面中接受事件的顺序 2.事件冒泡: 由最具体的元素接收,然后逐级上传播至最不具体的节点(文档) 3.事件捕获: 最不具体的节点先接收 ...
随机推荐
- JSP动作元素之useBean、setProperty、getProperty指令
简介 这三个指令都是与JavaBean相关的指令,其中useBean指令用于在JSP页面中初始化一个Java实例:setProperty指令用于为JavaBean实例的属性设置值:getPropert ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（4）构造尺寸更灵活的背景
相比传统的图片背景来说,使用CSS构造背景色不仅可以降低网络传输的开销,更由于其尺寸的可控性受到开发者的青睐. 如设计师设计了一张背景图片作为标题背景,如图5.18所示.对于用电脑浏览网页的用户来说, ...
- MySQL Cluster 7.3.5 集群配置实例（入门篇）
一.环境说明: CentOS6.3(32位) + MySQL Cluster 7.3.5,规划5台机器,资料如下: 节点分布情况: MGM:192.168.137. NDBD1:192.168.137 ...
- mount -t nfs 的使用
服务安装:1. 在VMware Ubuntu中安装NFS服务: sudo apt-get install nfs-kernel-server2. 安装成功会出现配置文件/etc/exports. ls ...
- cvCreateCameraCapture
编辑 本词条缺少信息栏.名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! cvCreateCameraCapture,初始化从摄像头中获取视频,专业名词. 初始化从摄像头中获取视频 ...
- python FileError
>>> ls1=["nihia"] >>> ls1 ['nihia'] >>> ls1.pop() 'nihia' >& ...
- bzoj3674 可持久化并查集
我是萌萌的任意门 可持久化并查集的模板题-- 做法好像很多,可以标号法,可以森林法. 本来有O(mloglogn)的神算法(按秩合并+倍增),然而我这种鶸渣就只会写O(mlog2n)的民科算法--再加 ...
- gdbsever 使用说明
gdbsever 使用说明 在新塘N3292x平台下 编译 gdbsever ./configure --target=arm-linux --host=arm-linux arm-linux-gdb ...
- sublime text install packages报错
汉化版的sublime text安装软件包的时候报错如下: There are no packages available for install 打开控制台,ctrl+~,然后看到如下错误: Pac ...
- java程序打包成jar
1. 建立文件夹:proj,在该文件夹下建立3个子文件夹:lib,src 2. 在lib文件夹中放置依赖的jar包 3. 在src中放置类文件:com.cnjava.demo.Main.java 4. ...