Question

我有一个overflow:hidden的父div，其中包含几个动态创建的子级。我希望能够使用按钮滚动父div，就像div具有overflow-y:scroll一样。父div始终一次暴露3个孩子。如何使用2个按钮（向上和向下滚动）完成此操作？是的，必须有两个按钮。

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

var clicks = 300;
$('#parent').click(function(){
    $('#parent').scrollTo(clicks);
    clicks += 300;
    if(clicks>1200){
        clicks=0;
    }
});

#parent { 
    width:200px; 
    height:300px; 
    overflow-x:hidden;
    overflow-y:hidden;
}

.child {     
    width:200px; 
    height:100px;
    font-size:100px;
    text-align:center;
    color:black;
    border-bottom:1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
    <div class="child" id="c1">1</div>
    <div class="child" id="c2">2</div>
    <div class="child" id="c3">3</div>
    <div class="child" id="c4">4</div>
    <div class="child" id="c5">5</div>
</div>

<button class="scroll-up">scroll up</button>
<button class="scroll-down">scroll down</button>

Answer 1

您实际上并不需要jQuery，因此这是一个普通的JavaScript解决方案，它甚至不使用包含滚动步骤的中间变量，而只是在当前滚动位置添加或删除300px（浏览器会阻止滚动超过滚动高度或达到负的最大值）。

var parent = document.getElementById('parent');
document.querySelector('.scroll-up').addEventListener('click', function() {
  parent.scrollTo(0, parent.scrollTop - 300);
});
document.querySelector('.scroll-down').addEventListener('click', function() {
  parent.scrollTo(0, parent.scrollTop + 300);
});

#parent {
  width: 200px;
  height: 300px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.child {
  width: 200px;
  height: 100px;
  font-size: 100px;
  text-align: center;
  color: black;
  border-bottom: 1px solid black;
}

<div id="parent">
  <div class="child" id="c1">1</div>
  <div class="child" id="c2">2</div>
  <div class="child" id="c3">3</div>
  <div class="child" id="c4">4</div>
  <div class="child" id="c5">5</div>
</div>

<button class="scroll-up">scroll up</button>
<button class="scroll-down">scroll down</button>

如何使用jQuery使用按钮滚动div？

1 个答案: