使用 Reactjs 中的按钮进行水平滚动答案

【问题标题】：Horizontal Scrolling using buttons in Reactjs使用 Reactjs 中的按钮进行水平滚动
【发布时间】：2019-03-15 18:23:20
【问题描述】：

我正在使用左右按钮在 div 元素上进行水平滚动。

我最初使用 refs 也达到了同样的效果。

onClickLeft = () => {
    this.props.refELement.current.scrollLeft -= 300;
}
onClickRight = () => {
    this.props.refElement.current.scrollLeft += 300;
}

但我似乎找不到将动画持续时间设置为此的方法。

使用jquery，可以这样实现：

$('.swipeRight').click(function(){
     $('.swipeBox').animate( { scrollLeft: '+=460' }, 1000);
});

$('.swipeLeft').click(function(){
     $('.swipeBox').animate( { scrollLeft: '-=460' }, 1000);
});

但是这段代码在 reactjs 中是不可复现的。

我基本上想在reactjs中实现this。

有什么帮助吗？

【问题讨论】：

你愿意分享你的反应代码吗？

标签： reactjs horizontal-scrolling smooth-scrolling

【解决方案1】：

您可以使用此代码

document.getElementById('left-button').onclick = function () {
   scrollLeft(document.getElementById('content'), -300, 1000);   
}

document.getElementById('right-button').onclick = function () {
   scrollLeft(document.getElementById('content'), 300, 1000);   
}
    
function scrollLeft(element, change, duration) {
    var start = element.scrollLeft,
        currentTime = 0,
        increment = 20;
        
        console.log(start)
        
    var animateScroll = function(){        
        currentTime += increment;
        var val = Math.easeInOutQuad(currentTime, start, change, duration);
        element.scrollLeft = val;
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
}

//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
	if (t < 1) return c/2*t*t + b;
	t--;
	return -c/2 * (t*(t-2) - 1) + b;
};

.left{
 float: left; 
 width: 30%;
 height: 200px;
 border: 1px solid black;
}

.internal{
 width: 31.75%;
 height: 100%;
 border: 1px solid black;
 display: inline-block;
}

.center{
 float: left; 
 width: 38.9%;
 height: 200px;
 border: 1px solid black;
 margin: 1px;
 overflow: hidden;
 /*will change this to hidden later to deny scolling to user*/
 white-space: nowrap;
}

.right{
 float: right; 
 width: 30%;
 height: 200px;
 border: 1px solid black;
}

<div class="left">
  left div
  <button id="left-button">
    swipe left
  </button>
</div>
<div class="center" id="content">
<div class=internal>
  div 1
</div>
 <div class=internal>
  div 2
</div>
 <div class=internal>
  div 3
</div>
 <div class=internal>
  div 4
</div>
 <div class=internal>
  div 5
</div>
 <div class=internal>
  div 6
</div>
 <div class=internal>
  div 7
</div>
 <div class=internal>
  div 8
</div>
</div>
<div class="right">
<button id="right-button">
    swipe right
  </button>
  right div
</div>

基于this code

【讨论】：