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

Posted 2023-05-09

【中文标题】使用 Reactjs 中的按钮进行水平滚动

【英文标题】：Horizontal Scrolling using buttons in 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。

有什么帮助吗？

【问题讨论】：

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

【参考方案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