Full Page Scroll

[warthogweb]

• not from one DOM div to another but a simple full screen scroll, regardless of the screen height on a nudge to the mouse wheel. I’ve seen the effect on a couple of sites where the page scrolls just one screen – contents – worth.
  Cheers, Martin

[warthogweb]

Thanks Jerba, but no. No effects, no snapping to sections.

Say the height of the viewport happened to be 520px, a mousewheel nudge would scroll in another 520px of content. Whatever the height of the viewport, that amount of content would be replaced by the same amount.

I have seen this somewhere and it makes for very efficient scrolling.

[Shikkediel]

Should there be no animation at all then – instantaneous, like on this page?

http://ataredo.com/

I happened to have written a small plugin as well (it uses mousewheel.js) that might be suitable :

http://codepen.io/Shikkediel/pen/GJRbOV?editors=001

This will make it scroll quickly (and add a delay so a single scroll is triggered with multiple mousewheels) :

$(window).on('load', function() {

$(this).impulse({

extent: $(window).height(),
tempo: 150,
method: 'linear',
delay: true
});

});

Had to rewrite it a bit – the animation tempo is as long as the mousewheel is ‘disabled’ here (until the page movement has finished). So setting it to zero (like with the first link) won’t work in this particular case. The minimum would be about 150ms.

[warthogweb]

The easiest way (possibly) to describe the effect is that it is the same as clicking on the scrollbar – one screen full is replaced by another screen full regardless of the height of the viewport. Whether it occupies 100% of the screen height or only 10%, the amount of new visible is either 100% or 10%.

Except that there is a simple transition animation and that the mousewheel is nudged forward or back to move the screen down or up.

Apologies for the terminological inexactitudes – a simple operation that is performed every day but is difficult to describe.

[warthogweb]

Incidentally, rt.com has a browser extension news feed that demonstrates (albeit with a fixed height) what I am looking for.

[Simon CL]

Well said worthogweb, I think it is definitely helpful

[Shikkediel]

I disagree. No sample code or actual link – or response to the answer posted makes it vaguer than before.

[warthogweb]

Thanks for all the help guys. This should give me what I want:

http://manos.malihu.gr/jquery-custom-content-scroller

[Author]

Posts