旋转后保持div滚动位置

Question

我有一个充满缩略图的div ，已将其设置为根据CSS的移动设备方向进行旋转。

问题是，旋转设备时， div会重绘，并且scroll bar的当前位置会重新设置为列表的开头。

我尝试了几种其他方法来保持列表的位置。 我有一些运气以下jQuery代码片段：

// record location of scroll for orientation
// change handling:
$('#mapLeft').on('scroll', function() {
    offset.scrollTop = $('#mapLeft').scrollTop();
    offset.scrollLeft = $('#mapLeft').scrollLeft();
});

// detect orientation change and make sure list
// stays in proper location:
$(window).on('orientationchange', function() {
    alert('from orientationchange event');
    $('#mapLeft').scrollTop(offset.scrollLeft);
    $('#mapLeft').scrollLeft(offset.scrollTop);
});

问题是，如果我删除alert ，它将不起作用，但我不知道为什么。

1.是否有人能够阐明为什么似乎需要警报才能使处理程序实际滚动回到先前设置的位置？

2.有什么方法可以完成此操作而又不需要傻警报？

我本以为这将是一个普遍的问题，但是我还没有找到适合我的解决方案。 感谢您的任何帮助，您可以提供。

这是CSS：

@media all and (orientation:landscape) {
    #mapLeft {
        float: left;
        height: 90%;
        margin-left: 1%;
        overflow: auto;
        width: 140px;
    }
}

@media all and (orientation:portrait) {
    #mapLeft {
        overflow-x: scroll;
        overflow-y: hidden;
        height: 140px;
        width: auto;
        white-space: nowrap;
    }
}

Jade HTML模板：

html
  head
    title #{title}
    meta(name="viewport", content="width = device-width, initial-scale = 1.0")
  body
    .border
    #mapLeft
    #mapRight
    #mapCanvas
    .border

我本以为这将是一个普遍的问题，但是我还没有找到适合我的解决方案。 感谢您的任何帮助，您可以提供。

Answer 1

做一个设置的超时或最好在重绘更改后尝试运行滚动功能...像回调之类的东西:)

我认为这可能是因为您在CSS中的过渡时间可能是0.3s ..因此您需要将超时时间设置为300ms。 玩吧:)