jQuery snap после горизонтального прокрутки

Question

У меня есть сайт с горизонтальной прокруткой, в котором используется плагин jQuery для мыши mousewheel. Прокрутка работает, но я хочу привязать каждую «статью» к левой стороне документа, чтобы она не оставалась на полпути после того, как прокрутка остановлена.

Разметка я до сих пор:

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(); 
}); 
}); 

Я попытался использовать этот сценарий без каких-либо хороших результатов. Кажется, что проценты не позволяют узнать предыдущее/следующее местоположение.

https://stackoverflow.com/a/8170667

Спасибо заранее.

Answer 1

Я не знаю, что вы имеете в виду в предыдущем/следующем месте.

Но вы можете в конце каждого прокрутки проверить, находится ли левая сторона экрана в ближайшей статье. Если нет, прокрутите немного ближе.

Может быть, как ...

$(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(); 
    }); 
});