如何用溢出替换div的滚动条:带箭头的auto

时间:2017-05-15 11:17:55

标签: javascript jquery html css

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

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

w = model.layers[1].get_weights()[0] # w.shape = (32,1,3,3)
w0 = w[0,0,:,:]

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

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

上找到的功能

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

1 个答案:

答案 0 :(得分:0)



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>
&#13;
&#13;
&#13;