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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
优化PHP程序的方法小结
2012/02/23 PHP
php析构函数的简单使用说明
2015/08/24 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
vue中appear的用法
2017/08/17 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
JS常用跨域方法实现原理解析
2020/12/09 Javascript
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python读取中文txt文本的方法
2018/04/12 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
Java里面有没有全局变量?为什么?
2015/02/06 面试题
总经理助理岗位职责
2013/11/08 职场文书
党支部换届选举方案
2014/05/08 职场文书
学党史心得体会
2014/09/05 职场文书
企业贷款委托书格式
2014/09/12 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2015入党个人自传范文
2015/06/26 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
Nginx 常用配置
2022/05/15 Servers