0

我有一个问题，请帮忙

  • 我们如何使用 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 最佳答案:)

4

2 回答 2

1

您需要使用 JavaScript 来监听“鼠标滚轮”事件。

然后使用事件 e.wheelDelta 来确定用户滚动的方向。

我必须使用我在这里找到的去抖动功能来防止事件被触发多次导致幻灯片滚动到底部。

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/

于 2013-07-12T08:52:18.300 回答
0

我建议您使用这个不错的 jquery 插件https://github.com/brandonaaron以避免对所有浏览器的本机鼠标事件进行过多的斗争......然后您可以滚动直到鼠标事件的正确位置：$（函数() {

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

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

       event.preventDefault();

   });

});

从http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/偷来的

于 2013-07-12T08:24:57.580 回答