美文网首页
浏览器间 scrollTop 兼容问题

浏览器间 scrollTop 兼容问题

作者: Primers | 来源:发表于2017-11-02 14:00 被阅读0次
  • 背景

    就是我那个自制博客的项目,在封面有个按钮,
    按下按钮就直接向下滚到内容的页面。

  • 情况

    该按钮是用 click 后,使用 animate 设置scrollTop的距离,
    来实现自动滚到目标位置的。最开始使用了这行代码:
    $("html").animate({"scrollTop": 100}, 1000)

  • 出现问题

    其实一开始没发现有问题,但是后来我到 Edge浏览器上运行了一下,
    发现,该按钮按下之后,丝毫没有反映,后台也没有报错,
    然后我把代码中的 html 换成了 body 后,Edge 实现了功能,
    但回到 Chrome 中,又出现了同样的问题,没反应。

  • 解决办法

    其实期间还经过各种折腾,但不得其解。
    最后我只能把代码写成这样:
    $("html, body").animate({"scrollTop": 100}, 1000)
    点击时,同时把 html 和 body 都选择上,最终解决问题。


  • 小探究

    一开始以为是 animate 的问题,但是试验后排除了。

    然后我就用了各个浏览器试了一遍(都是用的最新版17年10月)
    得出以下结果:
    fireFox、Chrome、IE9+均支持 $("html").animate({"scrollTop": 100}, 1000)
    而只有 Edge 需要改成 body 。
    在网上我还看到有人写的文章中指出,
    fireFox 和 Chrome 支持的有冲突,在我这并没有这种情况。

好吧就说到这,一个小问题。
但是我还是很好奇这是为什么,
大概是Edge浏览器的规则有点差异?

相关文章

  • 浏览器间 scrollTop 兼容问题

    背景就是我那个自制博客的项目,在封面有个按钮,按下按钮就直接向下滚到内容的页面。 情况该按钮是用 click 后,...

  • js获取滚动条偏移值

    滚动条的偏移值的兼容问题1、chrome支持的属性: document.body.scrollTop2、chrom...

  • 浏览器兼容

    什么是浏览器兼容问题 为什么会有浏览器兼容问题 用到的网站 处理兼容问题的思路 渐进增强和优雅降级 stackov...

  • 常见浏览器兼容问题及解决

    一、什么是浏览器兼容问题所谓浏览器兼容问题就是指不同浏览器或同种浏览器不同版本对相同代码解析效果不同,浏览器兼容问...

  • 浏览器兼容

    为何会有浏览器兼容问题 因为市场上的浏览器有很多,不同的浏览器内核对网页的解析存在差异,这也是导致浏览器兼容问题出...

  • 浏览器兼容

    1. 概要 什么是浏览器兼容问题? 同一份代码,有的浏览器效果正常,有的不正常 为什么会有浏览器兼容问题 同一产品...

  • 浏览器兼容相关概念

    什么是浏览器兼容问题?为什么会有浏览器兼容问题? 同一份代码,有的浏览器效果正常,有的不正常 同一产品,版本越老 ...

  • 浏览器兼容

    什么是浏览器兼容问题 同一份代码,有的浏览器效果正常,有的不正常 为什么会有浏览器兼容问题 同一产品,版本越老 b...

  • Browser Hack整理

    浏览器的兼容问题 1.浏览器内核:Mozilla Firefox ( Gecko )Internet Explor...

  • document.body.scrollTop 兼容问题

    1.各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用docume...

网友评论

      本文标题:浏览器间 scrollTop 兼容问题

      本文链接:https://www.haomeiwen.com/subject/ubvopxtx.html