Javascript: Как увеличить прокрутки мыши целевой раздел

Question

У меня есть вопрос, пожалуйста, помогите

• как мы можем прочитать событие прокрутки (мышь прокрутки к началу или вниз) с использованием Javascript?
• и как вызвать какое-либо событие после того, как мы читаем мышь прокручивается

Структура будет идти, как этот

<div id="listofstuff"> 
<div class="anitem"> 
    <span class="itemname">Item1</span> 
    <span class="itemdescruption">AboutItem1</span> 
</div> 
<div class="anitem"> 
    <span class="itemname">Item2</span> 
    <span class="itemdescruption">AboutItem2</span> 
</div> 
<div class="anitem"> 
    <span class="itemname">Item3</span> 
    <span class="itemdescruption">AboutItem3</span> 
</div> 
<div class="anitem"> 
    <span class="itemname">Item4</span> 
    <span class="itemdescruption">AboutItem5</span> 
</div> 
<div class="anitem"> 
    <span class="itemname">Item5</span> 
    <span class="itemdescruption">AboutItem5</span> 
</div> 

Скажем, первый раз, когда пользователь пришел к моей сети, они будет видеть пункт 1 после прокрутки вниз, страница автоматически плавно прокручивается до пункта 2

ТЕПЕРЬ КОГДА ОНИ В ПУТЕШЕСТВИИ 2

• если они прокрутки вниз - она ​​идет к пункту 3
• если они прокрутки вверх - он возвращается к пункту 1

Этот сайт делает то, что я хочу добиться: http://onlinedepartment.nl/

+1 за лучший ответ:)

Answer 1

Вы должны использовать JavaScript для слушайте событие «mousewheel».

И затем используйте события e.wheelDelta, чтобы выяснить, в каком направлении прокручивается пользователь.

Мне пришлось использовать a debounce function I found here, чтобы предотвратить многократное срабатывание события, в результате чего слайды прокручиваются вниз.

var amountOfSlides = 4; 
var counter = 1; //at slide 
var main = document.getElementById('main'); 
var currentPos = 0; 

//The scroll event fires way to many times so we need to use 
//debounce to only get the event once per scroll; 
window.addEventListener('mousewheel', debounce(function(e) { 

    //Check to see if the scroll is going up or down. 
    if(e.wheelDelta >= 0) { 

     //going up so make sure that the user isn't already at the top 
     if(counter <= 1) return; 
     currentPos = currentPos + window.innerHeight; 
     counter--; 

    } else { 

     //going down. make sure the user is not at the bottom. 
     if(counter >= amountOfSlides) return; 
     currentPos = currentPos - window.innerHeight; 
     counter++; 
    } 

    //change the position of the margin so that the slides move. 
    document.getElementById('main').style.marginTop = currentPos + "px"; 

}, 250)); 

// http://remysharp.com/2010/07/21/throttling-function-calls/ 
function debounce(fn, delay) { 
    var timer = null; 
    return function() { 
     var context = this, args = arguments; 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
      fn.apply(context, args); 
     }, delay); 
    }; 
} 

Для перехода между слайдами я использовал переходы CSS3, потому что они более плавные, чем анимации JavaScript.

Единственная проблема с этим - когда пользователь изменяет размер окна (требуется обновление), но я надеюсь, что это даст вам хорошее начало, потому что эта проблема может быть легко отсортирована, так как размер слайдов будет на 100% высота окна с помощью CSS.

html, body, #main{ 
    height:100%; 
    margin:0; 
} 
body { 
    overflow:hidden; 
} 
#main { 
    transition:1s; 
} 
article { 
    height:100%; 
} 

Я не использовал ваш HTML для простоты, но вы можете легко изменить его самостоятельно.

<section id="main"> 
    <article></article> 
    <article></article> 
    <article></article> 
    <article></article> 
</section> 

Это jsFiddle, чтобы показать вам, как это работает, надеюсь, что это поможет. http://jsfiddle.net/9wrDT/

Answer 2

Я бы рекомендовал вам использовать этот хороший JQuery плагин https://github.com/brandonaaron, чтобы избежать слишком много борьбы с нац IVE события мыши для всех браузеров ... Тогда вы можете просто прокрутите до нужного места на события мыши: $ (функция() {

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

     this.animate({ 
      scrollTop:theoffset 
     }, 'slow'); 

     event.preventDefault(); 

    }); 

}); 

украдена из http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/