javascript - 如何用溢出 :auto with arrows 替换 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>