I am trying to use this fix to support scrolling of my own feelings on a web page in iOS 5. I would like to update the position of the element when the page scrolls, but the position returned by the scrollTop symbol seems a little from the actual position of the element on the page.
I created an example that tries to save a block of text in the same place as page scrolls. If you try it on an iOS device, you'll see that the text is actually shaking, rather than staying in one place. This is frustrating because directly using touchmove events, this can be done without any jitter. But obviously, it is preferable to use the built-in scrolling algorithm.
Does anyone know of a workaround?
Example: live
<!DOCTYPE html> <html> <head> <title>Scrolling test</title> <meta charset="utf8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <style type="text/css" media="screen"> * { margin: 0px; padding: 0px; -webkit-backface-visibility: hidden; } #outer, #wrapper { position: absolute; height: 100%; width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $.event.props.push("touches"); $(function() { $("#wrapper").on("touchmove", function(e) { $("#thing").css("-webkit-transform", "translateY(" + ($(this).scrollTop()) + "px)"); }); }); </script> </head> <body> <div id="outer"> <div id="wrapper"> <div id="thing">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> </div> </body> </html>
source share