jQuery实现可兼容IE6的滚动监听功能


Posted in jQuery onSeptember 20, 2017

本文实例讲述了jQuery实现可兼容IE6的滚动监听功能。分享给大家供大家参考,具体如下:

其实这东西本打算用原生的javascript来写,但是原生的javascript取class与监听滚动条的滚动过于麻烦,因此上了jQuery,没关系,反正兼容IE6就行。

将实现如下的效果:

jQuery实现可兼容IE6的滚动监听功能

也就是在网页中有点常见的滚动监听。相应的标题,滚到哪里,则左边的滚动条当前标题前的。。。就变成》》》,,当然了,左边的标题同样是可以点击,马上滚到该滚的地方。

首先是网页布局部分,代码如下,请忽略大堆的JavaScript介绍,只是为了占格子,说明效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>滚动监听</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/ie6fixed.js"></script>
  </head>
  <body>
    <div>
      <div style="float:left;width:20%;">
        <div id="scrollspy" style="position:fixed;">
        <div id="debug"></div>
        </div>
      </div>
      <div id="content" style="float:left;width:80%">
        <p class="title">英文介绍</p>
        <p>JavaScript is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript for server-side web applications. On the client side, JavaScript has been traditionally implemented as an interpreted language, but more recent browsers perform just-in-time compilation. It is also used in game development, the creation of desktop and mobile applications, and server-side network programming with runtime environments such as Node.js.</p>
        <p class="title">由来</p>
        <p>Netscape在最初将其脚本语言命名为LiveScript,后来网景在与?N阳公司合作之后将其改名为JavaScript[7]。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”[8],因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme[9]。JavaScript与Java名称上的近似,是当时网景为了营销考虑与太阳微系统达成协议的结果。为了获取技术优势,微软推出了JScript来迎战JavaScript的脚本语言。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。现在两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的脚本语言来推广和宣传,但是JavaScript具有非常丰富的特性。</p>
        <p class="title">区别</p>
        <p>不同于服务器端脚本语言,例如PHP与ASP,JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担,而与此同时也带来另一个问题:安全性。而随着服务器的强壮,虽然现在的程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(如AJAX)必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展,及其事件驱动及异步IO等特性,JavaScript逐渐被用来编写服务器端程序。</p>
        <p class="title">标题2</p>
        <p>Netscape在最初将其脚本语言命名为LiveScript,后来网景在与?N阳公司合作之后将其改名为JavaScript[7]。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”[8],因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme[9]。JavaScript与Java名称上的近似,是当时网景为了营销考虑与太阳微系统达成协议的结果。为了获取技术优势,微软推出了JScript来迎战JavaScript的脚本语言。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。现在两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的脚本语言来推广和宣传,但是JavaScript具有非常丰富的特性。</p>
      </div>
    </div>
  </body>
</html>

基本思想如下:

jQuery实现可兼容IE6的滚动监听功能

这里,

(1)在第12行故意放一个空格,是因为不要让<div style="float:left;width:20%;"></div>这个div空空是也,以致于没有了宽度。

(2)为了使IE6支持position:fixed属性,引入了如下的一个ie6fixed.js,这东西的出处已经无从可考,新建一个js文件,拷贝下面的代码保存,在编辑网页的时候为了使IE6支持position:fixed引入这段脚本,同时对要在IE6实现position:fixed的脚本处,使用$("#div名称").toFixed();便兼容。

ie6fixed.js:

(function($){
  var isIE = !!window.ActiveXObject;
  var isIE6 = isIE && !window.XMLHttpRequest;
  var isIE8 = isIE && !!document.documentMode && (document.documentMode == 8);
  var isIE7 = isIE && !isIE6 && !isIE8;
  if (isIE6 || isIE7) { //ie6 | ie7 | ie8 not in standards mode
    $().ready(function(){
      var body = document.body;
      var BLANK_GIF;
      if (body.currentStyle.backgroundAttachment != "fixed") {
        if (body.currentStyle.backgroundImage == "none") {
          body.runtimeStyle.backgroundImage = "url(" + BLANK_GIF + ")"; // dummy
          body.runtimeStyle.backgroundAttachment = "fixed";
        }
      }
    });
  }
  $.fn.extend({
    toFixed: function(position){
      var isIE = !!window.ActiveXObject;
      var isIE6 = isIE && !window.XMLHttpRequest;
      var isIE8 = isIE && !!document.documentMode && (document.documentMode == 8);
      var isIE7 = isIE && !isIE6 && !isIE8;
      if (isIE6 || isIE7) {
      }
      else {
        return this;
      }
      return this.each(function(){
        var t = $(this);
        var id = t.get(0).id || 'fixed_' + parseInt(Math.rand() * 10000);
        var rect = {
          w: t.width(),
          h: t.height(),
          l: t.css('left'),
          r: t.css('right'),
          't': t.css('top'),
          b: t.css('bottom')
        };
        if (rect.l != 'auto') {
          rectl = parseInt(rect.l);
        }
        else {
          rectl = 0;
        }
        if (rect.r != 'auto') {
          rectr = parseInt(rect.r);
        }
        else {
          rectr = 0;
        }
        if (rect.t != 'auto') {
          rectt = parseInt(rect.t);
        }
        else {
          rectt = 0;
        }
        if (rect.b != 'auto') {
          rectb = parseInt(rect.b);
        }
        else {
          rectb = 0;
        }
        var _pos = {
          left: rect.l,
          right: rect.r,
          top: rect.t,
          bottom: rect.b
        };
        _pos = $.extend(_pos, position);
        var css = t.attr('style') + ';';
        css += 'position:absolute;bottom:auto;right:auto;clear:both;';
        if (rect.l != 'auto' && rect.r != 'auto')
          css += 'width:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.clientWidth - ' + rectl + ' - ' + rectr + ' : document.body.clientWidth - ' + rectl + ' - ' + rectr + ' );';
        if (rect.l == 'auto' && rect.r != 'auto')
          css += 'left:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollLeft + (documentElement.clientWidth-this.clientWidth - ' + rectr + ') : document.body.scrollLeft +(document.body.clientWidth-this.clientWidth - ' + rectr + '));';
        else
          css += 'left:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollLeft + ' + rectl + ' : document.body.scrollLeft + ' + rectl + ');';
        if (rect.t == 'auto' && rect.b != 'auto')
          css += 'top:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollTop + (documentElement.clientHeight-this.clientHeight - ' + rectb + ') : document.body.scrollTop +(document.body.clientHeight-this.clientHeight - ' + rectb + '));';
        else
          css += 'top:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollTop + ' + rectt + ' : document.body.scrollTop + ' + rectt + ');';
        t.attr('style', css);
      });
    }
  });
})(jQuery);

随后,以下的核心脚本才是本页面实现的关键所在:

<script type="text/javascript">
  $("#scrollspy").toFixed();//让scrollspy这个div在IE6同样可以position:fixed;
  //开始先遍历标题,生产目录
  var title_counter=0;
  $(".title").each(function(){
    title_counter++;
    //对于每一个class为title的标题设置锚点,同时在#scrollspy同生产每一个锚点的链接
    $(this).attr("id","title"+title_counter);
    $("#scrollspy").append("<p><a href='#title"+title_counter+"'>。。。"+$(this).html()+"</a></p>");
    //这里使用到<div>与<p>的组合,而不是<ul>与<li>,<ul>与<li>没有position:fixed;属性。不能不随滚动的移动而移动。
  });
  //之后是显示滚动条滚动事件,滚动条一旦滚动都会触发这个事件
  $(window).scroll(function() {
    var height_now=$(window).scrollTop();//取当前滚动条的高度位置
    title_counter=0;
    var title_now=0;//再次遍历左边的目录
    $(".title").each(function(){
      $("#scrollspy>p:eq("+title_counter+")>a").html("。。。"+$(this).html());//先将所有目录前的符号重新变成。。。
      if(height_now>$(this).offset().top){
        title_now++;//$(this).offset().top取出各个标题的高度位置,看当前滚动条的高度位置迈过了多少个标题
      }
      title_counter++;
    });
    $("#debug").html("当前高度:"+height_now+"px,标题数:"+title_counter+",当前标题为:"+title_now);//这行只是为了输出信息给大家看清楚,可以没有
    if(title_now>title_counter-1){//主要是防止某些浏览器滚动到最底部,无法定位到最后一个标题的现象
      title_now=title_counter-1;
    }
    $("#scrollspy>p:eq("+title_now+")>a").html("》》》"+$(".title:eq("+title_now+")").html());//对当前滚动条的高度位置迈过的最后一个标题前的。。。换成》》》
  });
</script>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 #jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 #jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
jquery 一键复制到剪切板的实例
Sep 20 #jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 #jQuery
jquery实现倒计时小应用
Sep 19 #jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 #jQuery
You might like
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
PHP 强制下载文件代码
2010/10/24 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
Python抓取京东图书评论数据
2014/08/31 Python
Python中的推导式使用详解
2015/06/03 Python
详解Python中for循环是如何工作的
2017/06/30 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
python yield关键词案例测试
2019/10/15 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
What is view? why do we have view?
2012/06/22 面试题
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang