jquery - Scroll-Jacking in Full Screen javascript; defining scrollThreshold - Stack Overflow

I stumbled across this blog post by Wes Hatch on their implementation of a “scroll-jacking” / forced scrolling. The effect is shown on and the blog post is here

I’ve tried to implement this effect, but when I do I get an error:

Uncaught ReferenceError: scrollThreshold is not defined 

This either occurs on line 12 or line 22 of the JS, depending on if you try and scroll up or down. I really like the effect and want to mess around with it, but I can’t figure out how to get it working. I tried adding

var scrollThreshold = 500;

and a few different numbers other than 500, which removed the console error but still didn’t actually fix/do anything in terms of getting the scroll to function.

I really like the functionality of the site and I’d love to get it to work, but my javascript is quite poor and I’m pretty stuck at the moment. I searched the live source code of hugeinc's javascript files but I couldn't find any reference to the term scrollThreshold. Any help would be great!

Here is a codepen:

PS: There are some replies of other people have issues on github, but no reply from hugeuser as of yet

I stumbled across this blog post by Wes Hatch on their implementation of a “scroll-jacking” / forced scrolling. The effect is shown on http://www.hugeinc. and the blog post is here http://www.hugeinc./ideas/perspective/scroll-jacking-on-hugeinc

I’ve tried to implement this effect, but when I do I get an error:

Uncaught ReferenceError: scrollThreshold is not defined 

This either occurs on line 12 or line 22 of the JS, depending on if you try and scroll up or down. I really like the effect and want to mess around with it, but I can’t figure out how to get it working. I tried adding

var scrollThreshold = 500;

and a few different numbers other than 500, which removed the console error but still didn’t actually fix/do anything in terms of getting the scroll to function.

I really like the functionality of the site and I’d love to get it to work, but my javascript is quite poor and I’m pretty stuck at the moment. I searched the live source code of hugeinc.'s javascript files but I couldn't find any reference to the term scrollThreshold. Any help would be great!

Here is a codepen: http://www.codepen.io/patrickwc/pen/HAoJl

PS: There are some replies of other people have issues on github, but no reply from hugeuser as of yet https://gist.github./hugeuser/9095183

• javascript
• jquery
• scroll

Share Improve this question Follow edited Feb 28, 2014 at 16:07 patrickzdb asked Feb 28, 2014 at 16:01 patrickzdbpatrickzdb 1,11311 gold badge1414 silver badges2727 bronze badges 6

• 1 Your CodePen is first of all missing jQuery, so you get an error in the console saying $ is not defined … – C3roe Commented Feb 28, 2014 at 16:24
• Ah I forgot to add it to codepen. I've just added it, thanks. I used jQuery on a local non codepen version I was working on and I still got the scrollThreshold error – patrickzdb Commented Feb 28, 2014 at 16:27
• 1 another problem is in function showSlide() you have to define "slides.each", I did at the top var slides = $('#projects .slide'). I dont mean it fully works now but atleast the slides go back and forth – Andres Commented Mar 14, 2014 at 14:00
• Hi Andres. I'm sorry I don't know what you mean, I tried adding "var slides = $('#projects .slide')" with and without a semicolon at the end, at the top of the function and within the showSlide() function. Could you edit the codepen to show me what you mean by slides going back and forth? codepen.io/patrickwc/pen/HAoJl – patrickzdb Commented Mar 14, 2014 at 15:04
• I doesn't look like anyone has figured this one out yet :/ no answers on github, the code the original author posted has tons of important elements missing. Trying to recreate it now – Leon Gaban Commented Apr 24, 2014 at 22:00

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

It looks like your scrollThreshold value is too big. The appropriate value for scrolling should be about 20 - 30. Here is the codepen that showing how it works: http://codepen.io/anon/pen/KJupc/ Hope this help.

the js on the original site is heavily obfuscated, i've been struggling myself with scrollThreshold value from the explanation example, until I found this part

function ft(i) { 
  ...
  if (r--, Math.abs(r) >= k)
  ....
},

where k is set to 5, so scrollThreshold=5, and delta is 0. thus it started working