Add horizontal snapping functionality

[guidobouman]

Horizontal snapping functionality is currently not present. Can this be added without increasing the plugin footprint unreasonably?

Opinions on wether or not you think this is crucial please.

[davcevski]

Hi, I just stumbled at your plugin, and it work great.

Currently I am thinking into implementing both snaps (horizontal and vertical).

My idea is to scroll multidimensional, start scrolling vertical, then change to horizontal, and continue to vertical again.

I will let you know if I succeed doing this with your plugin :)

[guidobouman]

Cool! If you're stuck somewhere, please don't hesitate to ask back here.

[udithishara]

Any update on this ?

[davcevski]

@udithishara I didn't succeed doing it, it wasn't working well on touch devices and I was pressed with thight deadline, so I ended up using different plugin for it, and only vertical scroll

[udithishara]

@davcevski well that's a shame :/ anyway thanks for replying :)

[guidobouman]

I'm working on implementing this myself. Together with keyboard navigation.

[prashantsavalia]

Anyone make any progress with this? I was looking at the JS files to see if I could figure out where I would change the direction. I wanted to keep the functionality the same except horizontally. So when the mouse wheel scrolls down, the panels would shift left and up would shift them right. Still no luck myself.

[guidobouman]

It's not really that easy. It enhances the existing scroll functionality, which means that the container should scroll horizontally, and that you have to change some of the offset calculations before it would work horizontally.

I'm a bit short on time right now. But I'm trying to implement this sooner rather than later.

[ephemer]

this would be a huge feature for me.

trying to achieve this functionality with one vertical and one horizontal snap (the middle pane of the vertical):

|   logo  |
| (fixed) |
------------------------------------
|  content  |  content  |  content  |
|           |           |           |
|           |           |           |
------------------------------------
| footer  |
| (fixed) |

[prashantsavalia]

Awesome. It would be an amazing achievement. I am willing to help bounce ideas off of if you like. I just wanted to put the idea our there for you. I don't want it to seem like I'm making requests and offering nothing in return. Please let me know if I can help or if you need someone to mull ideas over with. I would gladly volunteer myself as a test subject for any iterations of the work in progress. :)

[majorwaves]

^ I'm looking to do the same thing as these guys. Horizontal snapping would be awesome. Love this plugin, man.

[guidobouman]

Guys, what do you think?

I think allowing panelSnap doing only one direction at a time will work best.

This will prevent free roaming through the container, and allows similar looking-for-panel-functionality already present. Vertical + horizontal snapping can be achieved nicely by nesting a new panelSnap with opposite direction inside a panel.

Vertical-first example:

-----------
|         |
|  panel  |
|         |
-----------------------------------------
|         |         |         |         |
|  panel  |  panel  |  panel  |  panel  |
|         |         |         |         |
-----------------------------------------
|         |
|  panel  |
|         |
---------------------
|         |         |
|  panel  |  panel  |
|         |         |
---------------------

Horizontal-first example:

-----------------------------------------
|         |         |         |         |
|  panel  |  panel  |  panel  |  panel  |
|         |         |         |         |
-----------------------------------------
          |         |         |         |
          |  panel  |         |  panel  |
          |         |         |         |
          -----------         -----------
          |         |
          |  panel  |
          |         |
          -----------
          |         |
          |  panel  |
          |         |
          -----------

(Those examples are hard to do...)

[prashantsavalia]

I'd agree with that. Would it be possible to set that as an option in the code? Like use a specific name and that triggers which option (vertical or horizontal)? Not sure if that would work but it would be the optimal route. What do you think?

[guidobouman]

I think adding a direction option to the options object will do. Having two valid values: horizontal & vertical.

Utilising an isHorizontal boolean value would always enforce a correct answer though. Or I can just write my own enum object...

[prashantsavalia]

I think the isHorizontal boolean value is the way to go. Then the user of the plugin can set true or false and the site can build as needed.

[apsolut]

why not just a slider for horizontal, like on fullPage.js... only problem for me was that fullpage is just for full height, its not possible to put it inside fixed width+height box without 2much tweakin`...

[michaelfemia]

Maybe this could be used as a model for horizontal movement. Certain panels can be scrolled horizontally, without ending up in container no-mans land. http://alvarotrigo.com/fullPage/#firstPage

In my case, this would be useful for displaying sidebar content that doesn't need to be displayed inline for everybody)– stuff to get newbies up to speed, or engage experts and particularly curious readers.

However, I'd vote nay on the proposal that vertical scrolling triggers horizontal motion. Why not just use a chevron?

[guidobouman]

I'm not going to bind non-standard scrolling directions. This plugin has always been an extension of scrolling functionality, not a replacement.

Each instance of panelSnap will be a regular scrolling element. PanelSnap will enhance the scrolling experience by snapping, that's all folks. This way it's most predictable, extendible, cross-browser and most important of all keeps stuff simple for you and me.

PS: Adding buttons to your UI is optional. Chevrons? 6 lines of HTML, 6 lines of CSS & 6 lines of JavaScript, eat that. :grin:

[prashantsavalia]

Makes sense to me. I don't see a reason to bind all sorts of directions into it. That's why I was looking for a horizontal version. Horizontal and vertical are standard scrolling options. If the boolean is true, it scrolls left to right and if it's false, it does what it does now. The real question is how to change the direction of the scroll. I wasn't sure where that was done at all.

[guidobouman]

@prashantsavalia protip: whipe the content when responding through e-mail. I've deleted the content in your previous messages, try keeping this thread clean. ;)

[prashantsavalia]

No problem. I was responding to the email, not the thread. I didn't realize it was going through the same place. Sorry about that.

[kingsteven]

I adapted panelSnap for a project like this recently (vertical with nested horizontal sections). I basically hacked a panelSnapX.js by changing all the 'top's to 'left's, 'width's to 'hight's etc. While this worked fine on desktop (overflow-x section within a overflow-y section or vise versa). On mobile (Safari iPad) when scrolling a nested section the browser locks the parent in place (even without the plugin)... I'm really not sure how you would overcome this default behaviour.

[kingsteven]

Here's a fiddle to demonstrate the difference between default nested scroll behaviour between desktop browsers and mobile (tested safari, chrome on ipad):

http://jsfiddle.net/S3JEq/

There is a nested horizontal scrolling section in the middle vertical panel, if i place my cursor over it in a desktop browser and use my trackpad or mousewheel to scroll up/down it scrolls the parent (overflow-y: scroll;) div. On the iPad it will only scroll the nested element, the parent will not budge.

Another difference from the vertical panelSnap functionality is that the horizontal scrolling section requires a container element with a fixed width to allow the pages to float horizontally, this is easy enough to correct by discarding the offset from the scrollStop function... but it does impact on the simplicity of implementation.

I've since removed the nested scrolling div and panelSnapX script in my project and replaced with left/right swipe gestures but would be interested to know if there is a solution.

[gerwitz]

+1 … deadline means I'll have to look for other horiztonal-snap solutions, but I like this plugin more than most and would prefer to use it.

[joeczucha]

Another +1 for this functionality please :) did it ever get incorporated?

Thanks!

[lukecarbis]

+1 from me, too.

[Gaffen]

+1, like gerwitz deadlines mean I will have to skip this plugin now, but I would also prefer to use this plugin.

[maxnowack]

+1

[UAMike]

+1

[1GR3]

+1

[JWestarp]

+1 ... but I also have a deadline :disappointed:

[andri]

+1 :)

[Rockster160]

+1

[jromme]

@JWestarp @Gaffen @gerwitz The guys with the deadlines: What did you do to fix it? Or did you go for some other design?

[JWestarp]

I choosed an other design (vetical scroll) because it's better for usablity.

[andri]

@jromme, I used a custom solution in my case, this is based on something I found somewhere, can't remember where. Works pretty well for me.

function snap() {
    var elementWidth = 200; // Size if element to snap to
    var scrollPos = $(".container").scrollLeft();
    var newPos = Math.round(scrollPos / elementWidth) * elementWidth;
    $(".container").stop().animate({scrollLeft: newPos}, 400);
    $(".container").stop().animate({scrollLeft: newPos}, 400);
}

[Rockster160]

I also wrote a solution myself. It's not perfect by any means, and I made it pretty specific to my case (the type of horizontal snap I'm using isn't commonly used).

[guidobouman]

Good news for the people that are still interested in horizontal snapping. I'm on a 6 week release cycle now, to improve the quality of this plugin.

V0.15.0 is due the 5th of July, it'll contain snapping for flexible size panels. V1.0 is due the 16th of August, it'll have horizontal snapping!

[jromme]

@guidobouman: That would be a great addition to a already great plugin. Thank you!

[gerwitz]

Nice!

Are you looking at "fall forward" to CSS snappoints? I was just about to modify my homegrown carousel for them, but remain eager to throw away my invented wheel.

(It's too soon, yes, but it won't be long: http://caniuse.com/#feat=css-snappoints )

[guidobouman]

Oh snap! (pun intended...) Thanks for reminding me about that.

Can you open up a new issue @gerwitz? I'll put it on the roadmap. I'd love my plugin to become useless. Back when I saw it, I'd swear it was in not a single browser. Lets see if we can get a working version soon!

[bomalley]

Checking in for progress on this feature. Any news on V0.15 or V1.0?

Really in need of a horizontal snapping solution. Thanks for this great plugin!

[Gaffen]

Probably a bit late, but for my deadline I believe I ended up using jquery.snapscroll, with a little bit of hacking re. scroll orientation

[leeprobert]

Are you ready with v1.0. Need the horizontal snapping!

:-)

[ScottBeeson]

+1 for horizontal functionality.

[guidobouman]

:tada: This issue has been resolved in version 1.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: