Note that there are some explanatory texts on larger screens.

plurals
  1. POiScroll Scrolling Past Bottom?
    primarykey
    data
    text
    <p><s>You can easily see the problem on the first page here: <a href="http://m.vancouverislandlife.com/" rel="nofollow">http://m.vancouverislandlife.com/</a></p> <p>Scroll down (slide up) and allow the content to leave the page, and it doesn't bounce back and is lost forever. However, on pages whose content <em>does</em> overflow the page and is therefore supposed to be scrollable, the scrolling works correctly (see Accomodations > b&amp;b's and scroll down for an example of this).</p> <p>I noticed that on my computer, the scrolling on the first page is always stuck at <code>-899px</code>. I can't find anybody else who's experienced this problem and no matter what I try, I just can't fix it! Help!</p> <p>(It's not exactly urgent, however, as the target audience of iPhones and iPod Touches aren't affected by this since they have so little screen room.)</s></p> <p>Okay, new problem. To solve the iScroll issue, I just created a custom script. However, it's not working correctly on the <em>actual device</em>. On desktop browsers, it works just fine. On mobile, it occasionally jumps back to the top and won't recognize some touches. This is probably because of the way I cancelled the default event and had to resort to a bit of a hack. How can I fix this? (Yup - simple problem for a +500 bounty. Not bad, huh?)</p> <p>Here's the script, and the website is at the usual place:</p> <pre><code>function Scroller(content) { function range(variable, min, max) { if(variable &lt; min) return min &gt; max ? max : min; if(variable &gt; max) return max; return variable; } function getFirstElementChild(element) { element = element.firstChild; while(element &amp;&amp; element.nodeType !== 1) { element = element.nextSibling; } return element; } var isScrolling = false; var mouseY = 0; var cScroll = 0; var momentum = 0; if("createTouch" in document) { content.addEventListener('touchstart', function(evt) { isScrolling = true; mouseY = evt.pageY; evt.preventDefault(); }, false); content.addEventListener('touchmove', function(evt) { if(isScrolling) { evt = evt.touches[0]; var dY = evt.pageY - mouseY; mouseY = evt.pageY; cScroll += dY; momentum = range(momentum + dY * Scroller.ACCELERATION, -Scroller.MAX_MOMENTUM, Scroller.MAX_MOMENTUM); var firstElementChild = getFirstElementChild(content); content.style.WebkitTransform = 'translateY(' + range(cScroll, -(firstElementChild.scrollHeight - content.offsetHeight), 0).toString() + 'px)'; } }, false); window.addEventListener('touchend', function(evt) { isScrolling = false; }, false); } else { content.addEventListener('mousedown', function(evt) { isScrolling = true; mouseY = evt.pageY; }, false); content.addEventListener('mousemove', function(evt) { if(isScrolling) { var dY = evt.pageY - mouseY; mouseY = evt.pageY; cScroll += dY; momentum = range(momentum + dY * Scroller.ACCELERATION, -Scroller.MAX_MOMENTUM, Scroller.MAX_MOMENTUM); var firstElementChild = getFirstElementChild(content); content.style.WebkitTransform = 'translateY(' + range(cScroll, -(firstElementChild.scrollHeight - content.offsetHeight), 0).toString() + 'px)'; } }, false); window.addEventListener('mouseup', function(evt) { isScrolling = false; }, false); } function scrollToTop() { cScroll = 0; content.style.WebkitTransform = ''; } function performAnimations() { if(!isScrolling) { var firstElementChild = getFirstElementChild(content); cScroll = range(cScroll + momentum, -(firstElementChild.scrollHeight - content.offsetHeight), 0); content.style.WebkitTransform = 'translateY(' + range(cScroll, -(firstElementChild.scrollHeight - content.offsetHeight), 0).toString() + 'px)'; momentum *= Scroller.FRICTION; } } return { scrollToTop: scrollToTop, animationId: setInterval(performAnimations, 33) } } Scroller.MAX_MOMENTUM = 100; Scroller.ACCELERATION = 1; Scroller.FRICTION = 0.8; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COWhat happens if you set `bounce:true`? You might be aware of it but `position:fixed` doesn't work in mobile safari (until ios5). But then in ios5, you won't need any plugin as it supports kinetic scrolling [natively](http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/). If changing the plugin is an option, have you looked at [touchScroll](https://github.com/neave/touch-scroll) and [scrollability](https://github.com/joehewitt/scrollability/)?
      singulars
    2. CO@Mrchief: `bounce: true` makes no difference and I don't want the user to be able to scroll past the edges anyway. I am aware of the fact that `position: fixed` doesn't work in mobile Safari (but it's not so much unsupported as it is ineffective because mobile Safari uses a moving viewport instead of a fixed one), I'm not targeting iOS5 anyways, and yes, changing the plugin is an option so I will look at those, thanks.
      singulars
    3. COI tried to setup this locally, but wasn't successful (maybe due to the ajax calls which I don't have the php for or maybe it was late in night). Is it possible for you to dump static html that I can play with (jsfiddle will screw up things)? Surprisingly, last year I was using something else for kinetic scrolling with good results, I couldn't find the same plugin now (and I have moved on from that client too). Anyway, I'll try again.
      singulars
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload