Question

我在Chrome中遇到了一个奇怪的滚动问题，其中包含我正在使用的项目之一（http://dev.sreejesh.in/wpissue/）。

在谷歌浏览器中，第一次点击链接（“项目”）时，页面滚动延迟1秒。在一次滚动之后，在重新加载页面之前，问题将永远不会再出现。在Firefox中它完美运行。

我使用以下代码

HTML

public int[] batchUpdate(final List<Actor> actors) {
        int[] updateCounts = jdbcTemplate.batchUpdate("update t_actor set first_name = ?, " +
                "last_name = ? where id = ?",
            new BatchPreparedStatementSetter() {
                public void setValues(PreparedStatement ps, int i) throws SQLException {
                        ps.setString(1, actors.get(i).getFirstName());
                        ps.setString(2, actors.get(i).getLastName());
                        ps.setLong(3, actors.get(i).getId().longValue());
                    }

                    public int getBatchSize() {
                        return actors.size();
                    }
                });
        return updateCounts;
    }

的jQuery

<li class="fleft" style="opacity: 1;">
    <a href="javascript:void(0);" class="theprojects inpagelink">The Projects</a>
</li>

转到此处 - http://dev.sreejesh.in/wpissue/＆amp;点击“项目”或“关于我们”链接，您将在Chrome中看到问题。

* OS = Windows 10 | Chrome版本= 46.0.2490.86

请帮忙

Answer 1

如果您知道y / scrollTop位置值，请直接使用它，不要从DOM中读取它。测量东西很贵。

$('.theprojects').click(function(){
  var scrollTop = 600;
  $("html, body").animate({ scrollTop: scrollTop }, 1000);
});

考虑使用smooth element.scrollTo() API而不是jQuery。也许回退到jquery或者在旧浏览器中根本没有动画。

另外：图片太大了。一个超过3mb。这些应该按比例缩小和压缩。

Answer 2

最后，Wilson Page的建议解决了这个问题。这是页面中未优化的图像引起的问题。优化图像后，滚动在Chrome中流畅运行，无需更改脚本。

使用jQuery ScrollTop动画在Chrome中奇怪的第一次滚动延迟

2 个答案: