scrollTop的疑问

scrollTop的疑问

http://img1.sycdn.imooc.com//climg/5f9cf181093101ca07280321.jpg

两个问题:

1、如上图所示,为什么获取scrollTop的时候,用的是window对象,在设置scrollTop的时候用的却是html和body元素?
使用window对象不可以吗?请详细解释一下为什么?

2、这里需要给html和body都设置吗?只设置一个不行吗?请详细解释一下为什么?

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,‘好帮手慕赵’老师讲解的都是jquery中的scrollTop()方法。这个方法对于window,document,html以及body来说都是适用的,可以设置或者获取

http://img1.sycdn.imooc.com//climg/5f9e2a51091cf60904130148.jpg

但是截图中是scrollTop属性,是页面的属性

http://img1.sycdn.imooc.com//climg/5f9e2a620934247e07310147.jpg

只能通过html,body来设置

http://img1.sycdn.imooc.com//climg/5f9e2d22091ec51505380281.jpg

获取的时候可以是window或者document

http://img1.sycdn.imooc.com//climg/5f9e2d3c0984c4fa01680089.jpg

自己测试下,祝学习愉快!

提问者 人生的起源 2020-11-01 01:35:59


http://img1.sycdn.imooc.com//climg/5f9da05309120d6207640155.jpg
这里改成window对象就失灵了,换回html和body又可以了

好帮手慕慕子 2020-10-31 16:59:03

同学你好,对于你的问题解答如下:

  1. 获取和设置scrollTop时,使用window对象和html、body对象都是可以的,它们获取到的都是页面滚动的距离。视频中老师可能是为了让同学区分开,所以在获取和设置时使用了不同的对象。当然了,同学自己练习时,如果可以很好地区分开,获取和设置对象使用同一个对象也是可以的。

    示例:可以输出测试下结果:

    http://img1.sycdn.imooc.com//climg/5f9d2241098e9ae712650333.jpg

    打印结果如下:获取的都是页面滚动的距离,值是相同的

    http://img1.sycdn.imooc.com//climg/5f9d226809d3464710330774.jpg

  2. 只设置一个也是可以的,但是因为浏览器解析机制的问题,导致获取scrollTop属性时存在兼容性问题,所以为了代码的兼容性,推荐同学参考老师的写法,将html和body都写上。

    对于scrollTop的兼容性,老师举一个简单的示例,帮助同学更好的理解

    (1)当你的html不小心忘记书写了<!DOCTYPE html>声明时,无法通过html获取到scrollTop属性,只能通过body获取到scrollTop属性。

    http://img1.sycdn.imooc.com//climg/5f9d23880986b8e911780742.jpg

    http://img1.sycdn.imooc.com//climg/5f9d23d609546b8006480812.jpg

    (2)当添加了<!DOCTYPE html>这句声明之后,只能通过html获取到scrollTop属性,无法通过body获取到scrollTop

    http://img1.sycdn.imooc.com//climg/5f9d24150913a6d810720770.jpg

    http://img1.sycdn.imooc.com//climg/5f9d246309cc91bf06270678.jpg

祝学习愉快~

  • 提问者 人生的起源 #1
    我按你说的,换了对象试了,获取是可以,但是设置却不行,贴个图到上面
    2020-11-01 01:34:26
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师