Question

I setup a very simple Android app with a webview displaying the following:

<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>
​

Fiddle here.

What I’m doing is creating a simple scrollable area, however I want to offset the contents by a certain amount. It works great in Chrome, however does not seem to work at all in the Android webview. I even printed the value of main.scrollLeft before and after and it shows up in logcat as having been modified but nothing shows up in the display as having changed. Any ideas on what’s going on? I’ve tested this on Gingerbread and 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)');