javascript - scrollLeft 不适用于 Android 中的溢出 div？

Question

我设置了一个非常简单的 Android 应用程序，其 webview 显示以下内容：

<style>
div { 
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
}​
</style>
<div id="main">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <img src="https://www.google.com/images/srpr/logo3w.png">
</div>​
<script>
window.setTimeout(function () {
    var main = document.getElementById('main');
    main.scrollLeft = 300;
}, 5000);
</script>
​

在这里拉小提琴。

我正在做的是创建一个简单的可滚动区域，但是我想将内容偏移一定量。它在 Chrome 中运行良好，但在 Android 网络视图中似乎根本不起作用。我什至打印了main.scrollLeft之前和之后的值，它在 logcat 中显示为已修改，但显示中没有任何内容显示已更改。关于发生了什么的任何想法？我已经在 Gingerbread 和 ICS 上对此进行了测试。

Answer 1

CSS

#main {
    position: relative;
    left: 0px;
    -webkit-transition: -webkit-transform 0s linear;
    -webkit-transform: translateZ(0);
}

Javascript

// Offset is negative to scroll left, positive to scroll right...
$('#main').css('webkitTransform', 'translateX(' + offset +  'px) translateZ(0)');