V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Exceptionluo
V2EX  ›  JavaScript

window.scrollTo 执行问题。 单执行注释的那句没有效果,放到 window.olload 里也是一样。不知道这是什么原因

  •  
  •   Exceptionluo · 2017-10-18 09:37:07 +08:00 · 5165 次点击
    这是一个创建于 2618 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="test" style="height: 3000px"></div>
    </body>
    <script>
        setTimeout(function () {
            window.scrollTo(0, 3000)
        });
        //window.scrollTo(0, 3000)
    </script>
    </html>
    
    8 条回复    2017-10-18 17:54:33 +08:00
    evolify
        1
    evolify  
       2017-10-18 10:35:17 +08:00 via iPhone
    div 高度再大点,比 3000 大,试试
    2bt
        2
    2bt  
       2017-10-18 10:47:05 +08:00
    linux + chrome 61 测试有效
    2bt
        3
    2bt  
       2017-10-18 10:48:20 +08:00
    又测了一下,无效。(尴尬
    Exceptionluo
        4
    Exceptionluo  
    OP
       2017-10-18 13:04:52 +08:00
    @evolify 已经够大了,貌似和这个没得关系。
    @2bt 不知道这个方法是什么运行机制
    SEARCHINGFREE
        5
    SEARCHINGFREE  
       2017-10-18 13:21:05 +08:00
    chrome 刷新会记住位置,用 firefox ok
    SakuraKuma
        6
    SakuraKuma  
       2017-10-18 13:44:35 +08:00
    理由如#5

    而且不是没有效果,是下去了,chrome 还原回来了。

    如果想关闭, 把 histroy 中的 scrollRestoration 设为 manual 就可以( chrome46+
    https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
    2bt
        7
    2bt  
       2017-10-18 17:03:35 +08:00
    @SEARCHINGFREE
    @SakuraKuma

    大神,在上面这个基础上我又做了个测试,如果 body 高 1000px,且其中有内容的话,比如有十个<p>a</p>。
    在 history.scrollRestoration ='auto'的情况下,script 为 window.scrollTo(0, 3000)。
    假如滚动条是在最顶端,那么刷新时是完全没反应的。
    但是如果滚动条不在顶端,刷新的时候,滚动条都会自动往下面滚动一丁点,且刷新多次,会锁定在一个地方,这个距离和浏览器视图大小有关系,也和内容多少有关系。


    PS:要在本地预览,jsfiddle 上面执行都正常。
    完整代码:
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body{height: 1000px}
    </style>
    </head>

    <body>
    <div>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    </div>

    <script>
    window.scrollTo(0, 100);
    console.log(document.body.scrollTop);
    </script>
    </body>
    </html>
    Exceptionluo
        8
    Exceptionluo  
    OP
       2017-10-18 17:54:33 +08:00
    @2bt @SEARCHINGFREE @SakuraKuma 谢谢各位 !
    确实是被浏览器还原了。 新页面初次进入是有效的额,一旦用户改变了滚动条位置之后再刷新就没有了反应。
    @2bt 不过并没有你说的如果滚动条不在顶端,刷新的时候,滚动条都会自动往下面滚动一丁点情况
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3159 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:55 · PVG 20:55 · LAX 04:55 · JFK 07:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.