js 捕捉滚动条事件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Content/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="content">
<div id="divLeft" style="float:left;width:200px;height:300px;">
<div style="position:fixed">
<a href="#p1">这里是1</a><br />
<a href="#p2">这里是2</a><br />
<a href="#p3">这里是3</a><br />
<a href="#p4">这里是4</a><br />
<a href="#p5">这里是5</a><br />
<a href="#p6">这里是6</a><br />
<a href="#p7">这里是7</a><br />
<a href="#p8">这里是8</a><br />
<a href="#p9">这里是9</a><br />
<a href="#p10">这里是10</a>
</div>
</div>
<div id="divRight" style="float:left;">
<div id="p1" style="height:300px;width:100%;border:1px solid red;">这里是1</div>
<div id="p2" style="height:300px;width:100%;border:1px solid red;">这里是2</div>
<div id="p3" style="height:300px;width:100%;border:1px solid red;">这里是3</div>
<div id="p4" style="height:300px;width:100%;border:1px solid red;">这里是4</div>
<div id="p5" style="height:300px;width:100%;border:1px solid red;">这里是5</div>
<div id="p6" style="height:300px;width:100%;border:1px solid red;">这里是6</div>
<div id="p7" style="height:300px;width:100%;border:1px solid red;">这里是7</div>
<div id="p8" style="height:300px;width:100%;border:1px solid red;">这里是8</div>
<div id="p9" style="height:300px;width:100%;border:1px solid red;">这里是9</div>
<div id="p10" style="height:300px;width:100%;border:1px solid red;">这里是10</div>
</div>
</div>
<script>
function ChangeColor(index) { var aArray = $('#divLeft a');
for (var i = 0; i < aArray.length; i++) {
if (i == parseInt(index)) {
aArray.eq(i).css('color','red')
} else {
aArray.eq(i).css('color', 'black')
} } }
//function scrollFunc(e) {
// e = e || window.event;
// if (e.wheelDelta) { //第一步:先判断浏览器IE,谷歌滑轮事件
// if (e.wheelDelta > 0) { //当滑轮向上滚动时
// console.log("滑轮向上滚动");
// }
// if (e.wheelDelta < 0) { //当滑轮向下滚动时
// console.log("滑轮向下滚动");
// }
// } else if (e.detail) { //Firefox滑轮事件
// if (e.detail > 0) { //当滑轮向上滚动时
// console.log("滑轮向上滚动"); // var t = window.pageYOffset;
// console.log(t);
// }
// if (e.detail < 0) { //当滑轮向下滚动时
// console.log("滑轮向下滚动");
// }
// }
//} ////给页面绑定滑轮滚动事件
//if (document.addEventListener) {//firefox
// document.addEventListener('DOMMouseScroll', scrollFunc, false);
//} //window.onmousewheel = document.onmousewheel = scrollFunc; function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
} var t = scrollTop / 300; ChangeColor(t); return scrollTop;
}
document.onscroll = function () {
getScrollTop()
}
</script>
</body>
</html>
js 捕捉滚动条事件的更多相关文章
- js 获取滚动条事件
function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || d ...
- js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法
js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)
由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...
- JS学习之事件冒泡
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- jquery scroll()滚动条事件
最近做项目用了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现. 1.scroll()事件 ...
- js关闭浏览器事件,js关闭浏览器提示及相关函数
关于浏览器关闭事件的相关描述 有些朋友想在浏览器关闭的时候,弹出alert .confirm或者prompt等.实验证明,这种做法是失败的,原因是浏览器关闭事件自动屏蔽执行js的某些方法,从而防止恶意 ...
- Javascript和jquery事件--滚动条事件和自定义滚动条事件样式
很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...
随机推荐
- loj#6436. 「PKUSC2018」神仙的游戏(生成函数)
题意 链接 Sol 生成函数题都好神仙啊qwq 我们考虑枚举一个长度\(len\).有一个结论是如果我们按\(N - len\)的余数分类,若同一组内的全为\(0\)或全为\(1\)(?不算),那么存 ...
- Android为TV端助力 VelocityTracker 速度追踪器的使用及创建
VelocityTracker 速度追踪 第一,创建方式: VelocityTracker mVelocityTracker = new VelocityTracker .obtain() 第二, ...
- ionic开发中,输入法键盘弹出遮挡住div元素
采用ionic 开发中,遇到键盘弹出遮挡元素的问题. 以登陆页面为例,输入用户名和密码时,键盘遮挡了登陆按钮. 最终采用自定义指令解决了问题: .directive('popupKeyBoardSho ...
- Centos 7下VMware三台虚拟机Hadoop集群初体验
一.下载并安装Centos 7 传送门:https://www.centos.org/download/ 注:下载DVD ISO镜像 这里详解一下VMware安装中的两个过程 网卡配置 是Add ...
- eclipse安装中java环境的搭建
转自博客园:amandaj 做了小小改动. 一.java 开发环境的搭建 这里主要说的是在windows 环境下怎么配置环境. 1.首先安装JDK java的sdk简称JDK ,去其官方网站下载最近 ...
- ERP口碑订单无法落桌的解决方法
第一步,退出ERP 第二步,打开控制面板卸载erp 第三步,删除erp安装路径的所有文件 第四步,卸载sql服务,操作方法如下(win+R—输入cmd—输入sc delete mysql_sl 回车键 ...
- 【Apache运维基础(6)】Apache的日志管理与分析
简述 Apache 访问日志在实际工作中非常有用,比较典型的例子是进行网站流量统计,查看用户访问时间.地理位置分布.页面点击率等.Apache 的访问日志具有如下4个方面的作用: 记录访问服务器的远程 ...
- The content of element type "package" must match "(result-types?,interceptors?,default-interceptor-ref?,default-action-ref?,default-class-ref?,global- results?,global-exception-mappings?,action*)".
报错 The content of element type "package" must match "(result-types?,interceptors?,def ...
- XSS攻击介绍
一.概念 XSS攻击全称跨站脚本攻击,是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS,XSS是一种在web应用中的计算机安全漏洞, ...
- 自动化测试基础篇--Selenium单选框(Radio)复选框(CheckBox)
摘自:https://www.cnblogs.com/sanzangTst/p/7686602.html 一.什么是单选框.复选框? 二.单选框:radio 三.复选框:checkbox 四.判断是否 ...