5

目标

因此，我<div>在单列布局中有一个 s 列表，它们具有“活动”或“非活动”类。活动类在项目右侧显示图形，非活动类不显示。我进行了设置，以便按向上或向下箭头键将“活动”类（以​​及带有它的图形）移动到上一个或下一个项目。它不是动画的，但您可以直观地看到图形在上方或下方的标签上消失和重新出现。

现在我想让页面在箭头键上向下滚动，以便项目的顶部边缘始终位于同一位置。由于元素列表大于页面窗口，所以需要自动滚动浏览器，使选中的元素<div>始终位于屏幕中央...

编码

//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)
    }
});

问题

问题在于，在所有版本的 Safari（但没有其他浏览器）中，window.scroll 方法在 CSS 类切换性能方面稍逊一筹。发生的情况是它们最终出现在两个不同的重绘事件中，当您向下滚动时，页面看起来像“小故障”，因为您可以在浏览器向下滚动之前简要地看到下一个元素右侧的图形。

现场演示

您可以在此处实时查看：

http://hashtag.ly/#minecraft

使用箭头键翻阅项目。注意跳跃。我应该如何解决这个问题？

4

2 回答 2

1

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

于 2012-12-17T03:58:14.807 回答
1

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

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

此外，对于使用高大浏览器的人（比如我），目前在细节和选定的帖子之间可能会有很多白色的空间。（见截图）

详细信息与所选帖子相去甚远。

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

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

更接近所选帖子的详细信息。

更新：

想一想，AOL 的电子邮件客户端 Alto 拥有您实施的 UX。在 Alto 中，如果您使用按键浏览，左栏会自动滚动。但是，您实际上并没有滚动，他们正在将内容添加到容器元素中并将其带到视图中（我忘记了这叫什么……虚拟化？）。看起来他们自己在管理所有与滚动相关的视觉效果和行为，并且没有使用本机功能。所以，这都是 JS 控制的 CSS 和 DOM 操作，实际上没有scrollTo()调用。这将它们全部置于同一个渲染周期中。

美国在线奥拓电子邮件

于 2012-12-17T05:03:04.997 回答