<!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 捕捉滚动条事件的更多相关文章

  1. js 获取滚动条事件

    function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || d ...

  2. js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法

    js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...

  3. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  4. JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)

    由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

  5. JS学习之事件冒泡

    (1)什么是事件起泡      首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什 ...

  6. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  7. jquery scroll()滚动条事件

    最近做项目用了到scroll滚动条事件,花了很多时间做搜索,没有很好的先整理思考后再去搜索,做编码事件时,没有事先考虑清楚,理清思路,先做简单的测试成功后,再完成其他的实现. 1.scroll()事件 ...

  8. js关闭浏览器事件,js关闭浏览器提示及相关函数

    关于浏览器关闭事件的相关描述 有些朋友想在浏览器关闭的时候,弹出alert .confirm或者prompt等.实验证明,这种做法是失败的,原因是浏览器关闭事件自动屏蔽执行js的某些方法,从而防止恶意 ...

  9. Javascript和jquery事件--滚动条事件和自定义滚动条事件样式

    很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...

随机推荐

  1. JMeter http(s)请求插件jmeter-plugin-httpBinaryFileUpload.jar

    JMeter http(s)请求插件jmeter-plugin-httpBinaryFileUpload.jar   by:授客 QQ:1033553122 1. 测试环境 apache-jmeter ...

  2. selenium的基本用法

    selenium需要配合一个driver  我使用的是chrome的driver 注意一定要下载对应浏览器版本的driver 否则会报错的 http://chromedriver.storage.go ...

  3. 腾讯云Centos安装gitlab

    参考了网上很多人写的安装教程,结果并不好,最后阅读了官方的英文api,才安装成功,这里记录下来,方便以后使用.我的安装环境为腾讯云主机Centos7.3 64bit gitlab官方api地址点我试试 ...

  4. 使用fiddler对手机上的程序进行抓包

    用fiddler对手机上的程序进行抓包,网上有很多的资料,这里写一下来进行备用.   前提: 1.必须确保安装fiddler的电脑和手机在同一个wifi环境下 备注:如果电脑用的是台式机,可以安装一个 ...

  5. [20181124]关于降序索引问题2.txt

    [20181124]关于降序索引问题2.txt --//链接:blog.itpub.net/267265/viewspace-2221425/,探讨降序索引中索引的键值.--//实际上使用函数sys_ ...

  6. mssql sqlserver存储过程专题

    MSSQL存储过程简介及创建方式 mssql_DB_存储过程类型简介   MSSQL sql存储过程创建简介及应用举例 MSSQL SQl server 2008 CLR 存储过程创建举例 MSSQL ...

  7. 自动化测试基础篇--Selenium中数据参数化之TXT

    摘自https://www.cnblogs.com/sanzangTst/p/7722594.html 一.搜索参数化 在TXT文件中保存需要搜索的内容: 测试代码: 1 #!/usr/bin/env ...

  8. SQL Server "允许远程连接到此服务器" 配置

    在SQL Server的属性-->连接中我们可以看到这样一个选项:'允许远程连接到此服务器'(英文是remote access),其默认值是1,表示此选项开启. 但是这个参数并非是字面上所显示的 ...

  9. Windows Server 2016-Wbadmin命令行备份域控制器

    在上一章我们讲到Windows Server 2016-图形化备份域控制器的方法,本章我们聊聊如何通过命令行Wbadmin对域控制器进行备份.在Windows Server Active Direct ...

  10. CentOS7安装redis数据库及php-redis扩展

    redis 首先把redis安装到服务器中 1.wget http://download.redis.io/redis-stable.tar.gz 下载redis源码 2. tar xvzf redi ...