benoitpointet / jquery-scrollsnap-plugin Goto Github PK

I would like to be able to set the proximity option to a value relative to the viewport height, and to reset it after the initial setup. My case use: a responsive layout where in big screens each panel fills the entire viewport, but not in smaller ones, leaving some scrolling area. It would be specially useful in dealing with device orientation changes.

Well, I tried many combination of the function, but still, after im scrolling to some snap point it jumps up and down without stopping. any help with that?

I've created a replica of my current HTML state in a JSfiddle where you can see that horizontal snapping ain't working. -> http://jsfiddle.net/blackvibes/BxCy8/

It might be an easy fix, since you've got it working on the demo, but I don't seem to find the solution.

I hope you can help me, thanks!

Add ability to snap horizontally.

Add ability to specify direction of the snap, i.e. wether to look for snap points above / below / above&below of scrolltop.

Is there any way to do this? Go to the next snap when PAGE Down is pressed and previous with PAGE UP. If you imagine a post with 12 pictures, it would be just perfect to and effortless browse through with this. Please consider this in an update.

Also, any way to temporarily pause the script when the mouse clicks and scrolls on the scrollbar? It still tries to "snap" when you scroll.

Thanks for a great script.

I didn't know how to surmise for the title - I apologise!

Scrolling breathing room so it doesn't attempt to snap between scrolls. It tries to snap immediately after I've left my fingers! It's crazy.

I had some very large proximities to begin with but it was nuts haha

I'm looking for a way to detect if the user has stopped scrolling for a while and to then initialise the snap.

Great job so far!

Integrate the specialevents system to control the latency parameter of the event.

When using the scrollingEl.defaultView for snapping the entire DOM window, it fails to snap in IE (verified in version 10 and below) because the browser doesn't understand the 'scrollX' or 'scrollY' properties.

I was able to work around this by modifying the code to check for undefined type of 'scrollX', and if so, use the 'pageXOffset' property instead.

Feel free to merge this code into your project.

var tempOffset;

$(scrollingEl).find(settings.snaps).each(function() {
     tempOffset = (typeof scrollingEl.defaultView['scrollX'] != "undefined") ? 'scroll'+settings.direction.toUpperCase() : 'page' + settings.direction.toUpperCase() + 'Offset'; //Since IE doesn't know what "scrollX" is, then switch to "pageXOffset"
       var snappingEl = this,
       dy = Math.abs(($(snappingEl).offset()[leftOrTop.toLowerCase()] + settings.offset) - scrollingEl.defaultView[tempOffset]);

       ...rest of code...
}

This feature is great, but if the elements you want to snap aren't until further down the page (say you have 100% height intro div on your site) I don't want it to immediately snap down to the element if a user is on a short browser.

To elaborate:

I have the snap elements 700px tall. I want it to always snap to something when scrolling through these elements, so I set the proximity to half of that (350px). The problem is, if someone is still on the intro div (set to 100% height, above the snap elements) depending on screen size, a little bit of scrolling and the user is immediately taken to the first object.

(I could see this potentially being an issue if the snap elements were taller than 700px, where the snapping happens on page load before the user even scrolls, just because of the proximity to the first snap element)

I have the same issue with the last element, but it would be great if there was a way to detect if the user has scrolled to the bottom, and if so to not do anything with the snapping. Thoughts?

Iphone 4s with IOS7 Beta3 safari gives nasty bouncing loop effect that never stops. hope this is just beta but i think it is something to look for if issue stays.

It would be handy with a destroy method. A use case could be to disable snapping for touch devices.

hello,
i am using scrollsnap on a series of divs which are each full window height. when the window is resized the div's heights change and scrollsnap starts making the whole page jitter up and down. i looked for a destroy method so i could rebuild scrollsnap on resize but it looked like you decided not to do one.
do you know another workaround?
thank you for the otherwise fantastic piece of code : )
b

scrollsnap not work in ie11

according to #5

due to div with overflow

The version that is installed when running

bower install jquery-scrollsnap

is not the same as used in the example (http://benoit.pointet.info/stuff/jquery-scrollsnap-plugin/) and that is in the git repository. To get the most up to date version one has to run

bower install jquery-scrollsnap#master

This happened two times to me by now, so I thought I leave a note :)

The fix would maybe be to bump up the version number in the bower.json?

Thanks for this great plugin!

ability to capture the scroll gesture and snap on the next snap in that direction.

I'm working on a site with full window snappable elements and I'm wondering if there's a way to fire off a snap whenever the windows resizes? I thought about just being hacky and making a script that scrolled one pixel on resize so the plugin does it, but I figured there's gotter be a smarter way.

Any help would appreciated. I understand jquery enough to do less smart things like the pixel thing, but not enough to engineer this resize thing myself.

Hi and thanks for a nice plugin!

I'm setting the proximity option to be half the viewport height. I would like to update this on resize. What would be the best way to do so? As far as I can tell, there's no API for this and simply re-initializing the whole plugin doesn't seem to do the trick.

Does anyone know how to change the code to support snapping to the next/previous page whenever the user scrolls to make scrolling easier? the current code needs the user to scroll for more than half of a page to snap to another page.