如何将 div 的滚动条替换为溢出:自动与箭头

Question

我正在尝试制作一个小div，用于在电子商务网站的jquery图像缩放插件中的图片之间滚动。

这是我到目前为止所拥有的。

<div style="width:125px;height:300px;overflow:auto;margin:auto;">
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>

这是一个jsfiddle https://jsfiddle.net/2o482ofp/

我需要隐藏滚动条，而是使用固定的箭头按钮在div 中上下移动。我正在尝试模仿可以在 https://www.daraz.pk/ca-sports-black-pu-running-shoes-for-men-6605753.html 上找到的功能

我

做了很多谷歌搜索，但找不到任何教程、指南、插件或任何关于我正在尝试做的事情，如果有人可以请帮助，非常感谢。

Answer 1

var blockHeight = 75;
var marginTop = 10;
$('.up').click(function(){
    
    var $elem = $('div>div:eq(0)');
		var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
    
    console.log('currentOffset', currentOffset);
    var result = currentOffset - blockHeight - marginTop;
		$elem.css("margin-top", result + "px");
});
$('.down').click(function(){
     var $elem = $('div>div:eq(0)');
		var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
    var result = currentOffset + blockHeight + marginTop;
    
    console.log('.currentOffset', currentOffset)
		$elem.css("margin-top", result + "px");
})

div > div {
  
  transition: margin 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<button class="up">up</button>
<button class="down">down</button>
<div style="width:125px;height:300px;overflow:hidden;margin:auto;">
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>