Question

我有一个带按钮的网站。当我按下按钮时，我希望页面（正文）自动向上和向下滚动。

UNTIL我尝试自己滚动页面，然后自动滚动必须立即停止，直到用按钮重新启动。

我发现很多关于如何进行自动滚动的帖子 - 但不是在这种情况下，能够阻止它。

有什么想法吗？

Answer 1

嗨，你可以从这个例子link

中获得灵感

<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>
</div>

和

$(document).ready(function() {
    var wrapper = $('#listofstuff'),
    element = wrapper.find('.anitem'),
    lastElement = wrapper.find('.anitem:last-child'),
    lastElementTop = lastElement.position().top,
    elementsHeight = element.outerHeight(),
    scrollAmount = lastElementTop - 2 * elementsHeight;

    $('#listofstuff').animate({
        scrollTop: scrollAmount
    }, 1000, function() {
        lastElement.addClass('current-last');
    });
});

和

.anitem {
    height:58px;
    background:#eee;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #fff;
    padding:20px;
    color:000;
    font-family: Helvetica,Arial, Verdana,sans-serif;
    -webkit-transition: all 1000ms;
}
.anitem.current-last{
    background: #99d;
}
#listofstuff {
    width:300px;
    height:300px;
    overflow:auto;
}

Javascript自动向上和向下滚动，随时取消

1 个答案: