jQuery snap after horizontal scroll

Question

I have a horizontal-scrolling site that is using mousewheel jQuery Plugin. The scroll works but I want to snap each "article" to the left-side of the document so it doesn't stay half-way cut once scrolling is stopped.

The markup I have so far:

CSS

#viewport {
width:100%;
height:100%;
overflow: hidden;
}

#stage {
height:100%;
width:400%;
position: absolute;
display:block;
overflow: hidden;
}

#stage article {
width:25%;
height:100%;
position: relative;
display:block;
float:left;
}

HTML

<div id="viewport">
<section id="stage" class="clearfix">
<article>
This is the block that should snap to the left once scrolling is stopped.
</article>

<article>
This is the block that should snap to the left once scrolling is stopped.
</article>

<article>
This is the block that should snap to the left once scrolling is stopped.
</article>

<article>
This is the block that should snap to the left once scrolling is stopped.
</article>

</section>
</div>

JQUERY

$(function() {
$("html, body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});

I tried using this script with no good results. It seems the percentages are preventing knowing the previous/next location.

https://stackoverflow.com/a/8170667

Thanks in advance.

David · Answer 1 · 2013-08-22T21:32:57.713

1

I don't know what you mean by the previous/next location.

But you could, at the end of each scroll, check if the left side of the screen is at the nearest article. If not, scroll a bit closer.

Maybe like...

$(function() {
    $("html, body").mousewheel(function(event, delta) {

        var theBody = $('body');
        theBody.scrollLeft(this.scollLeft() - delta * 30);

        /* Snap how close, how many articles, and what direction is the scroll? */
        var tolerance = 10;
        var numberOfArticles = 4;
        var signDelta = number?number<0?-1:1:0;

        /* While you're not within an acceptable tolerance, get a little closer */
        while (!((theBody.scollLeft()%(theBody.width() / numberOfArticles))  > tolerance))
        {
            theBody.scrollLeft(theBody.scollLeft() - signDelta * 1);
        }

        event.preventDefault();
    });
});

edited Aug 22 '13 at 21:32

answered Aug 22 '13 at 20:15

David

444
2
9

David, by location I mean the previous or next article. The script I was testing would detect how far from the first article the current was and then calculate the distance to scrollLeft. That didn't work. I will try your suggestion. Thanks! – JessyR22 Aug 22 '13 at 20:24
Then if your articles have equal width, you can just find out if you're at a multiple of their width, and move towards the closest multiple. So when ((scrollLeft % articleWidth) == 0) you're lined up on an article (assuming the first article is lined up at zero.) – David Aug 22 '13 at 20:32
David, I am testing your code but returns scrollLeft() is not a function. I have fixed the misspelling but still no dice. All I need is that if x article is visible, scrollLeft to the left until it's left is 0. Didn't think it would be this complicated. – JessyR22 Aug 22 '13 at 20:53
Oh, you probably want to only scroll the `body`, not `html` as well. edit: I edited my answer, hopefully to illustrate – David Aug 22 '13 at 21:31

jQuery snap after horizontal scroll

1 Answers1