在做导航栏的时候，肯定会用到点击滑动的，但不知道大家有没有遇到过这种问题：

$(window).animate({

   scrollTop: "1000px"

})

$(document).animate({

   scrollTop: "1000px"

})

$('html,body').animate({

   scrollTop: "1000px"

})

上面三种方法哪种可行？不行的方法为什么行不通？

以前做的时候就知道第三种方法可以，另外两个不可以，但一直不知道为什么，现在又遇到了这个问题，所以不能再偷懒了，有必要追究一下为什么了。

查看了很多资料，发现可能是这个原因：

首先要了解animate()这个方法，他是jquery封装的一个方法，用于执行一个基于css属性的自定义动画。这句话很关键，他要基于css属性。看一下animate()方法的语法：

$(selector).animate(styles,speed,easing,callback) 或者$(selector).animate(styles,options)

我的理解是要想执行该自定义动画，selector选择器一定要有改属性才行，所以做了一下测试(简单的在chrome的控制台里敲了一下)，发现：

window和document是全局的对象，他们的属性中并没有scrollTop，是不是就可以认为他们不具有这个css属性，所以就不能执行animate这个自定义动画。

但是document.body确实有scrollTop这个属性的：

所以

$(document.body).animate({

    scrollTop: 1200+"px"

})

这种写法是可以执行的。

下面再看一下html和body的情况：

结果竟然和window以及document返回的一样，都是undefined。

综合以上可以看出，只有document.body有这个属性，其他的好像都没有，为什么window和document不可以，而html,body确是可以的。后来也问了很多人，但没有该出令人满意的答案，暂且就按一位同事说的那样，这就像中学时学英语一样，理解不了就记住吧，就像当时老师说的那样，这就是规定。。。。

后面用其他浏览器测试了一下，发现有一点也很重要：

$("html")和$("body")以及$(document.body)的区别

1）在chrome浏览器里面后面两个是可以的，html却不可以。

2）在IE以及firefox里面，html可以，后面两个却不可以。

所以最好的写法就是$("html,body")这样。

以上所有都是点击滑动的时候触发的自定义动画，还有另外一个问题就是滑动过程中，要根据滚动条的高度做一些事情，比如改变导航栏样式。

和上面一样，哪种方法可以，哪种方法不可以，为什么？？

$(window).scroll(function() {

    console.log(1);

})

$(document).scroll(function() {

    console.log(2;

})

$("html,body").scroll(function() {

    console.log(3);

})

大家应该都知道前两种都是可以的，第三种是不可以的。重要的是，为什么？？？？和上面的情况好像刚好相反一样，是不是很奇怪。

和上面分析的方法一样，先看scroll()这个方法，它也是jqeury的一个方法，该方法为每个匹配元素的scroll事件绑定处理函数，它会触发scroll事件，该事件一般适用于window对象或其他可滚动元素(一般会出现滚动条)。

从上面的定义可以看出，可滚动元素即高度超出以后会出现滚动条的应该都可以才对，为什么第三种方法不可以？？

自己测试了才知道，当页面内容超过一屏的高度时，出现的滚动条是window或者说是document的，而不是html或body的，所以第三种方法才会无效，因为html或body没有设置高度，或者高度设置成了100%，所以没有出现滚动条。

如果强制给他们设置高度，并设置overflow-y:scroll的话，第三种方法也是会触发的。如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <script src="./jquery.js"></script>

</head>

<style>

    html,body {

        max-height: 500px;

        background: #333;

        overflow-y: scroll;

    }

    p {

        line-height: 50px;

        font-size: 50px;

        color: #fff;

    }

</style>

<body>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

    <p>dsfsfd</p>

</body>

<script>

    $("html,body").scroll(function() {

        console.log(1);

    })

</script>

</html>

以上就是滑动过程中我遇到的一些问题，其中有些问题没有完全理解，希望看的透彻的大神，能够不吝告之。

js中有关滑动问题的一些理解的更多相关文章

  1. 关于 js 中的 call 和 apply使用理解

    关于 js 中的 call 和 apply使用理解 在学习新的东西时候,碰到以前看过而又不理解,或则记忆不深的地方不妨回头看看书里知识点,有助于加深理解.正所谓--温故而知新. 废话不多说,直接上代码 ...

  2. JS中的call()和apply()方法理解和使用

    1.方法定义call方法: 语法:obj.method.call(thisObj[,arg1[, arg2[, [,.argN]]]]) 定义:调用对象(obj)的一个方法(method),以另一个对 ...

  3. js中的同步和异步的个人理解（转）

    你应该知道,javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流 ...

  4. 【repost】js中(function(){…})()立即执行函数写法理解

    摘要: javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ...

  5. js中(function(){…})()立即执行函数写法理解

    文章摘自https://my.oschina.net/u/2331760/blog/468672?p={{currentPage+1}} 摘要: javascript和其他编程语言相比比较随意,所以j ...

  6. js中对类和对象的理解

    类 :对一群具有相同特征的对象的集合的描述:对象:真实存在的对象个体: **面向对象,而不是面向类. 1.一切皆对象,继承靠原型链,多态靠弱类型,封装--虽然可以靠闭包,但我个人更推崇和python一 ...

  7. 关于js中变量声明和作用域的理解

    1. var是声明一个变量:虽然声明了这个变量,但在存入值之前,它的初始值是 undefined:2.全局变量:拥有全局作用域,在js代码中的任何地方都是有定义的:3.局部变量:在函数内声明的变量只在 ...

  8. js中(function(){…})()立即执行函数写法理解（转载oschina）

    ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到 ...

  9. js中var，let，const理解

    var变量提升: 解释:在声明a之前输出a,因为a是使用var声明变量得到提升,解释为下句 var a: console.log(a) a = 1; var声明会提到最上面的位置,但是赋值的位置还是当 ...

随机推荐

  1. 【自动化测试】关于UI自动化的疑问（记录ing）

    1. 数据变动问题导致业务需要增加新的逻辑,这是增加case的健壮性还是浪费时间? 2. 如何做好PO? 不断数据抽离不断优化方法? 3. 如何提高调试代码的效率? /web可以 4. 主管不理解自动 ...

  2. AVL树的旋转实现

    AVL树:带有平衡条件的二叉查找树,即一棵AVL树是其每个节点的左子树和右子树的高度最多相差1的二叉查找树.一般通过Single Rotate和Double Rotate来保持AVL树的平衡.AVL树 ...

  3. Android下监听Home键

    网上看到demo,亲测了以下机器和设备,均测试通过: 测试通过的手机: 1.华为荣耀3(Android 4.2.2) 2.小米2s(Android 4.1.1) 3.联想的手机 (Android2.3 ...

  4. unity, setting standard shader by script

    http://forum.unity3d.com/threads/change-standard-shader-render-mode-in-runtime.318815/

  5. bootstrap-datetimepicker在经过GC(Google Closure Compiler)压缩后无法使用的解决方案

    将压缩级别由simple改成whitespace 问题就是这样之后压缩后的文件大了很多 <?xml version="1.0"?> <project name=& ...

  6. hdu 2602 Bone Collector（01背包）

    题意:给出包裹的大小v,然后给出n块骨头的价值value和体积volume,求出一路下来包裹可以携带骨头最大价值 思路:01背包 1.二维数组(不常用 #include<iostream> ...

  7. ansible命令执行模块使用

    ansible命令执行模块使用 1.命令执行模块-command 在远程节点上运行命令. 命令模块使用命令名称,接上空格-的分割符作为参数使用,但是不支持管道符和变量等,如果要使用这些,那么可以使用s ...

  8. sendip简单使用

    sendip是linux下一个比较好用的发包软件,简单记录一下它的用法 下载源码,编译安装后,可通过  man sendip,查看具体选项介绍,其中说明sendip支持的协议包括:ipv4 ipv6 ...

  9. Ubuntu 下一个可用的音乐播放器

    参考:http://www.pairsdoll.com/install-audacious-music-palyer-in-ubuntu.html/ 方法:打开terminal,sudo apt-ge ...

  10. 笔记：修改centos的IP地址相关配置

    最近碰到不少认识的人问相关问题 索性做个笔记 图个方便 修改eth0的网卡配置vi /etc/sysconfig/network-scripts/ifcfg-eth0DEVICE=eth0BOOTPR ...