是否可以使用上一个或下一个 div 滚动上一个/下一个？

Question

Previous/Next 是否可以与 Previous 或 Next div 垂直滚动？

如果有，是如何实现的？

<!-- PREVIOUS / NEXT -->
<span class="go-prev">Previous</span> 
<span class="go-next">Next</span>

<!-- CONTAINER -->
<div id="container">

  <!-- SECTION 1 -->
  <div class="section current" id="section-1">Section1</div>
  <!-- SECTION 2 -->
  <div class="section" id="section-2">Section2</div>
  <!-- SECTION 3 -->
  <div class="section" id="section-3">Section3</div>
  <!-- SECTION 4 -->
  <div class="section" id="section-4">Section4</div>
  <!-- SECTION 5 -->
  <div class="section" id="section-5">Section5</div>

</div>

Answer 1

您可以通过以编程方式显示和隐藏 div 来完成此操作。查看此小提琴以获取可行的解决方案（在 chrome 中测试）：

http://jsfiddle.net/bHS93/1/

您只是将 css 样式应用于正确的 div 并保持最后一个已知状态。您可以通过使用 jQuery 之类的库添加转换来修饰它。记得更新eth

<!-- PREVIOUS / NEXT -->
<span id="go-prev">Previous</span> 
<span id="go-next">Next</span>

<!-- CONTAINER -->
<div id="container">
    <!-- SECTION 1 -->
    <div class="section current" id="section-1">Section1</div>
    <!-- SECTION 2 -->
    <div class="section" id="section-2">Section2</div>
    <!-- SECTION 3 -->
    <div class="section" id="section-3">Section3</div>
    <!-- SECTION 4 -->
    <div class="section" id="section-4">Section4</div>
    <!-- SECTION 5 -->
    <div class="section" id="section-5">Section5</div>
</div>

CSS

.section {
    display: none;
}
.current {
    display: block;
}

和 JS

var prev = document.getElementById('go-prev'),
    next = document.getElementById('go-next'),
    pagination = (function () {
        var pages = [1, 2, 3, 4, 5], //the number of 'pages'
            current = 0;

        page = function (forward) {
            //reset visible div
            document.getElementById('section-' + (current + 1)).className = 'section';

            //traverse to the next one if we're not already at the beginning or end
            if (forward) {
                if (current < pages.length - 1) {
                    current++;
                }
            } else {
                if (current > 0) {
                    current--;
                }
            }

            document.getElementById('section-' + (current + 1)).className = 'section current';
        };
        return page;
    })();

prev.onclick = function () {
    pagination(false);
};
next.onclick = function () {
    pagination(true);
};