JavaScript window.scroll延迟导致异步重画 目标

因此，我有一个

列表，所有这些都在一个单列布局中，类为“active”或“inactive”。活动类在项目右侧显示一个图形，而非活动类不显示。我有它的设置，所以点击向上或向下箭头键将“活动”类（及其图形）移动到上一个或下一个项目。它没有设置动画，但您可以直观地看到图形在标签上方或下方消失或重新出现

现在我想让页面在箭头键上向下滚动，这样项目的上边缘总是在同一个点上。由于元素列表大于页面窗口，因此有必要自动滚动浏览器，使选定的

始终位于屏幕中央

代码 问题 问题在于在Safari的所有版本中，但在其他浏览器中，window.scroll方法的性能略落后于CSS类切换。发生的情况是，它们以两个不同的重画事件结束，当您向下滚动时，页面看起来像是在“闪烁”，因为在浏览器向下滚动之前，您可以在下一个元素的右侧短暂地看到图形

现场演示 您可以在这里现场查看：

---

使用箭头键翻页浏览项目。注意跳跃。如何解决此问题？

尝试使用按钮而不是div，并在激活特定项目时使用setfocus（）。浏览器将自动滚动，使聚焦按钮始终可见。您可以使用CSS使按钮看起来与div一模一样。

我认为一个避免该问题的解决方案是您最好的选择

从用户体验的角度来看，当我浏览一个站点时，我不喜欢该站点篡夺对滚动位置的控制权

此外，对于那些拥有高浏览器的人（比如我），目前在细节和所选帖子之间可能有很多白色的不动产。（见截图）

我的建议是更改设计，以便在选定的帖子旁边显示详细信息，并让用户进行滚动。使用CSS控制细节的位置，使其位于所选文章的旁边，将使其与其他所有内容处于相同的渲染周期

更接近所选帖子的详细信息可能如下所示：

更新：

想想看，美国在线的电子邮件客户端Alto拥有您已经实现的用户体验。在Alto中，如果使用键进行浏览，左列会自动滚动。但是，您实际上并没有滚动，而是将内容添加到容器元素中并将其带入视图中（我忘了这是什么…虚拟化？）。看起来他们自己在管理所有与滚动相关的视觉和行为，而不是使用本机功能。所以，这都是由JS控制的CSS和DOM操作，实际上没有

scrollTo（）

调用。这将使其全部处于相同的渲染周期中

---

webkit是hashtagly.css

中唯一具有渐变和线性渐变的工具。右bg、。左bg{…背景图像：-webkit渐变（…

其他工具仅使用线性渐变（但没有用于测试的safari）很多DUP CSS在那里，我的希望，这是答案，但感谢我的头。他们我需要瘦身的代码大的时间。作为一个解决方案，你可能会考虑动画页面滚动或不知何故使用动画来避免这个问题。这是一个疯狂的简单的想法，它可能会工作！我将报告这里。ll to.animate with 0 duration产生了同样的问题。不幸的是，添加一个duration会更糟糕…eye soar。你能举个例子吗？我不太明白新设计会是什么样子。但我还是在考虑重新设计整个设计。@JacksonGariety当然，我在帖子中添加了另一个图像。如果我在网上看到一些东西，一个例如，我将发布它或链接到它。有趣，但有很多空白。因为这是唯一真正的答案，我会接受它，因为它让我跳出框框思考！@JacksonGariety谢谢！是的，有很多空白…也许你可以在每篇文章的右侧有一行文本区域。如果用户单击文本区域您可以将其扩展到正常大小并显示一个回复按钮。空间会得到更好的利用，并且只需单击一次即可回复任何给定的帖子。哇，您的更新很有趣。因此，他们不是滚动，而是在右窗格元素上添加或删除页边空白？

//Paging through items with arrow keys
theWindow.keydown(function (e) {
    var key = e.keyCode,
        oldItem = $('li.active')

    if ((key === 40 && oldItem.next().length) || (key === 38 && oldItem.prev().length)) {
        var theWindowMod = (window.innerHeight / 2) + 43,
            theHTML = $('html'),
            theDetail = $('.detail')

        theHTML.addClass('notransition')

        if (key === 40 && oldItem.next().length) {
            oldItem.removeClass('active').next().addClass('active')
        } else if (key === 38 && oldItem.prev().length) {
            oldItem.removeClass('active').prev().addClass('active')
        }

        var newItem = $('li.active')

        window.scroll(0, newItem.offset().top - theWindowMod)
        e.preventDefault()
        $('.detail-inner.active').fadeOut(0).removeClass('active')
        $('section.active, .tab.active').removeClass('active')
        newItem.find('.tab').add(theDetail).addClass('active')
        theDetail.find('.detail-' + newItem.attr('class').split(' ')[0]).addClass('active').fadeIn(0)

        setTimeout(function () {
            theHTML.removeClass('notransition')
        }, 1)
    }
});