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>

由于主要代码＆＃39;的堆栈溢出限制，只有2个产品。让我们说这些产品中有10种，我希望显示其中的5种产品，并且按照向前和向后按钮的点击逐个显示休息，就像facebook在查看照片时一样。

Answer 1

您可以将class='container div设置为特定高度。如果你的物品＆＃39;高度是，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>

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

1 个答案: