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>

小提琴here。

我正在做的是创建一个简单的可滚动区域，但是我希望将内容偏移一定量。它在Chrome中运行良好，但在Android webview中似乎根本不起作用。我甚至在之前和之后打印了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)');

scrollLeft在Android中的溢出div上不起作用？

1 个答案: