【javascript 学习之自定义滚动条加滚轮事件】的更多相关文章

javascript 学习之自定义滚动条加滚轮事件

要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候,只要鼠标滚动的方法就行了,而这通过检测datail的正负号就可以确定 2.其他的用mousewheel(Ie是onmousewheel),通过检测wheelDelta <!doctype html> <html> <head> <title>拖拽-加滚轮<…

JavaScript学习笔记- 自定义滚动条插件

此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } /*滚动文本及滚动条大框*/ .scroll_con { w…

JavaScript学习笔记-自定义滚动条

这是一个基本实现思路,如果有新手和我一样没什么事,喜欢瞎研究话,可以参考下. 一.Html <div class="scroll_con"> <div class="scroll_text"> 这里是你的需要显示在滚动条框内文本内容...... </div> </div> 二.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*…

JavaScript学习日志（六）：事件

这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!!!还得重新继续敲,所以提醒各位笔者,永远不要相信所谓的时时保存,敲一点记得保存一点!坑!!! 一,概念梳理 1,事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间: 2,事件流:描述的是从页面中接收事件的顺序:IE团队提出的是事件冒泡流,Netscape团队提出的是事件捕获流: 3,事件冒泡:事件…

js 页面无滚动条添加滚轮事件

当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault(); e=window.event||e; var value; if(e.wheelDelta) value=e.wheelDelta; else if(e.detail) value=-e.detail; } var addMouseWheelHandler=function(){ if(doc…

JAVAscript学习笔记 js句柄监听事件 第四节 （原创） 参考js使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>句柄添加监听事件</title> <script type="text/javascript" src="tzy.js"></script> </head> <body>…

javascript学习之带滚动条的图片

之前找了好久没有找到,就自已动手写了一个: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0; padding: 0;} .div1{position: relative; height: 150px; width: 680px…

JavaScript学习笔记-自定义集合类

//集合类Set( ES6标准才有的类,目前兼容性较差)//自定义集合类:extend = function (o,p){ //定义一个复制对象属性的类函数 for(var x in p){ o[x] = p[x]; } return o;};function Set(){ this.values = {}; this.n = 0; this.add.apply(this,arguments); //把所有参数都添加进这个集合}Set.prototype.add = function(){ //…

javascript学习笔记（七）：事件详解

HTML事件处理 <!DOCTYPE html> <html> <head lang="en"> <meta chaset="UTF-8"> <title></title> </head> <body> <button onclick="demo()">按钮</button> <script> function de…

web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解

1.JS事件详解-事件流 1.1.事件流 1.事件流: 描述的是在页面中接受事件的顺序 2.事件冒泡: 由最具体的元素接收,然后逐级上传播至最不具体的节点(文档) 3.事件捕获: 最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title…