Looking for examples of HTML scroll resistance

Discussion in 'Web Design and Development' started by ninethirty, Oct 12, 2015.

  1. ninethirty macrumors 6502a

    Mar 1, 2006
    First off - I'm not looking for scroll jacking :) I've asked this question to a few friends and they always think I'm looking for scroll jacking.

    A few months back I saw a site that allowed you to scroll normally, into an area of the site (an account opening module) and you were now sort of locked into this section. You could scroll away from it, but there was resistance required to break away from the section. When you did, you sort of snapped out of it.

    Unfortunately I cannot find this page (don't remember the site) and the best example I can show is this youtube video demonstrating the app Peek. You'll see when a person swipes down at the top of the calendar, there's a bit of resistance. The circle starts to stretch, and once they break the threshold, they snap into a previous part of the page that otherwise wouldn't be accessible without the extra effort in the scroll. The part I'm referring to happens at 1:55


    My question is, has anyone seen this anywhere, or is there a technical term for it? Does anyone know how it's done in code? Trying to show a dev of ours so he can understand it properly.

    Cheers in advance!
  2. 960design macrumors 68030

    Apr 17, 2012
    Destin, FL
    Javascript onscroll(). when hitting a certain scroll point (v=300), capture the page, apply event.preventDefault until scroll point hits another number(v=500). Animate something for the v300 -> v500. You may need to sprinkle in some stopPropagation() to keep from pulling your hair out, depending on your code.

    It's good design to allow the 'pop' but do not overdo it.

Share This Page