javascript - 如何制作垂直滚动的交互式按钮？

Question

假设我有这些 div，它们是产品和

<div class="container">
                <div class="product">
                    <div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
                    <div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div>
                    <div class="price">
                        <span>Rs. 37,900</span>
                        <input type="button" class="btn btn-primary btn-sm" value="Details"/>
                    </div>
                </div>
                <div class="product">
                    <div class="image"><img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg"/></div>
                    <div class="description"><h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4></div>
                    <div class="price">
                        <span>Rs. 37,900</span>
                        <input type="button" class="btn btn-primary btn-sm" value="Details"/>
                    </div>
                </div>
            </div>

由于“大多数代码的 stackoverflow 限制”，只有 2 个产品。假设有 10 个这样的产品，我想显示其中 5 个，其余的将通过单击前进和后退按钮一一显示，就像 Facebook 在查看照片时一样。

Answer 1

您可以将 class='container div 设置为特定高度。如果您的元素高度为 200px，您可以将容器设置为 400px。然后单击按钮即可滚动容器 div。您的代码将如下所示:

<script>

function scrollOneItem(){
    var container = document.getElementByClassName('container');
    container.scrollTop = container.scrollHeight + 200;
}

</script>

<button onClick="scrollOneItem()">Scroll down</button>
<div class="container">
...
</div>