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

$(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. table 锁定表头，出滚动对齐

    前一段时间来了一个汇总的需求,想锁定表头,这个问题在网上找了老半天,实现起来都比较麻烦,经过这几天的摸索终于找到一个简洁的处理方法 下面介绍一下如何处理的: 1.thead 和tbody 放两个tab ...

  2. windows 不能在本地计算机启动apache2 的解决方法（不是修改端口）

    使用命令行运行apache目录下的httpd程序,它会提示哪里出错了,修改即可 D:\Program Files (x86)\Apache2.\bin\httpd

  3. Selenium2Library系列 keywords 之 _SelectElementKeywords 之 unselect_from_list(self, locator, *items)

    def unselect_from_list(self, locator, *items): """Unselects given values from select ...

  4. Android各个版本代号及其特性

    - Android1.1 2008 年9月发布的Android第一版 - Android1.5 Cupcake (纸杯蛋糕) 2009年4月30日,官方1.5版本(Cupcake 纸杯蛋糕)的Andr ...

  5. C ~ C语言字节对齐

    1. 什么是对齐? 现代计算机中内存空间都是按照字节(byte)划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变量的时候经常在特定的内存地址访问,这就需要各类型 ...

  6. VC远控（三）磁盘显示

    服务端: 发送与接收命令 DWORD WINAPI SLisen(LPVOID lparam) { SOCKET client = (SOCKET)lparam; COMMAND command; w ...

  7. EIGRP汇总

    转自:http://myhat.blog.51cto.com/391263/193189/ 实验目的:1.理解EIGRP的自动汇总的缺点2.配置EIGRP手工汇总的方法A>>>还是老 ...

  8. DOM笔记（五）：JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  9. Sunrise Release Version History

    Sunrise Release Version History 1.4.1.0 1.1.0.0 1.0.1.0

  10. DouNet学习_代码生成器

    string conn = "Data Source={0};Initial Catalog={1};User Id={2};Password={3}"; //点击链接 priva ...