当前位置:千赢国际官网 > 千赢网页手机版登入 > scroll事件实现监控滚动条分页示例,深入理解j

scroll事件实现监控滚动条分页示例,深入理解j

文章作者:千赢网页手机版登入 上传时间:2019-07-30

scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素。

如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜。

在实际的项目中,我们通常都是用构造函数来创建一个对象,再将一些常用的方法添加到其原型对象上。最后要么直接实例化该对象,要么将它作为父类,再申明一个对象,继承该父类。

复制代码 代码如下:

那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语:

而在继承的时候有两种常用方式,今天我们就来稍作探讨

$(document).ready(function () { //本人习惯这样写了
    $(window).scroll(function () {
        //$(window).scrollTop()这个方法是当前滚动条滚动的距离
        //$(window).height()获取当前窗体的高度
        //$(document).height()获取当前文档的高度
        var bot = 50; //bot是底部距离的高度
        if ((bot $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
           //当底部基本距离 滚动的高度〉=文档的高度-窗体的高度时;
            //我们需要去异步加载数据了
            $.getJSON("url", { page: "2" }, function (str) { alert(str); });
        }
    });
});

1、代码块
JavaScript中的代码块是指由<script>标签分割的代码段。例如:

复制代码 代码如下:

注意:(window).height()和(document).height()的区别

复制代码 代码如下:

//父类
 function Person(name){
    this.name = name;
};

jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用.

<script type="text/javascript">
      alert("这是代码块一");
</script>
<script type="text/javascript">
      alert("这是代码块二");
</script>

 // 子类
 function Student(sex){
  Person.apply(this,arguments); //继承父类的构造函数
  this.sex=sex;
 };

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变,但是jQuery(document).height()是不变的。

JS是按照代码块来进行编译和执行的,代码块间相互独立,但变量和方法共享。什么意思呢? 举个例子,你就明白了:

1,继承Prototype:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

$(document).scrollTop() 获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离

<script type="text/javascript">
      alert(str);//因为没有定义str,所以浏览器会出错,下面的不能运行
      alert("我是代码块一");//没有运行到这里
      var test = "我是代码块一变量";
</script>
<script type="text/javascript">
      alert("我是代码块二"); //这里有运行到
      alert(test); //弹出"我是代码块一变量"
</script>

Student.prototype = Person.prototype; //执行完此句时,Student.prototype.constructor 指向的是Person,为什么了?因为Person.prototype.constructor指向Person,对象的赋值实质上是引用赋值,所以Student.prototype.constructor也指向Person
Student.prototype.constructor = Student;  //  将Student.prototype.constructor 指回Person

要获取顶端 只需要获取到scrollTop()==0的时候  就是顶端了

上面的代码中代码块一中运行报错,但不影响代码块二的执行,这就是代码块间的独立性,而代码块二中能调用到代码一中的变量,则是块间共享性。

用Person的原型对象来覆盖Student的原型对象;前面说到对象的赋值实质上是引用赋值,所以如果Student.prototype上的任何修改都会体现到Person.prototype中,即子类会影响父类。

要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height()  就可以知道已经滚动到底端了

2、声明式函数与赋值式函数

看下面:

复制代码 代码如下:

JS中的函数定义分为两种:声明式函数与赋值式函数。

复制代码 代码如下:

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

复制代码 代码如下:

Student.prototype.add=function(){alert("add")};
Person.prototype.add();//弹出add

自己做个实验就知道了

<script type="text/javascript">
     function Fn(){ //声明式函数

2,继承实例:

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:scroll事件实现监控滚动条分页示例,深入理解j

关键词: 千赢国际官网