2

Is there an easy way to capture the user's scroll event (either mousewheel, touch event, or cursor keys) so that the website scrolls to a particular point instead.

I don't know what it's called, but this site does it: http://bit.ly/1JMYyGE

You try and scroll down and the view is scrolled to a new section, rather than allowing the user to stop mid-section.

Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289

4 Answers4

3

This page is using anchors to direct the screen to a specific location. You can see what location that is in the url it comes right after the hash #page-1 for example. anchor tag this site could help with setting up anchor tag.

Jacob Finamore
  • 797
  • 5
  • 19
  • Just to add to this answer, it's usually done with anchors and a bit of js / jquery for smooth scrolling: https://css-tricks.com/snippets/jquery/smooth-scrolling/ – logic-unit May 15 '15 at 14:56
0

What you want is something like one page scroll such as these plugins

JSantos
  • 1,698
  • 22
  • 39
0

The procedure usually is solved by emulating the scroll behaviour. Make the site

html, body {overflow:hidden;}

And have your individual "pages" as 100% width/height containers that you animate with JS and/or CSS3 transitions. I'd recommend using hardware-accelerated transitions to increase performance. That is, take a look at transform: translate3d(0,0,0); for CSS.

So animating to page X from page Y: Place page X outside viewport and animate it to a y-value of 0, whilst animating page Y in the opposite direction.

Eric
  • 18,532
  • 2
  • 34
  • 39
0

Try something like this:

http://jsbin.com/wukigajegu/2/edit?html,js,console,output

What you actually want to do will vary depending on how your page is set up.

woverton
  • 441
  • 1
  • 3
  • 12