如何使用纯javascript函数而不使用jquery在div内向左或向右滚动？

Question

我正在尝试仅使用 javascript 在 div 内向左或向右滚动，而没有使用 jquery。 我已经使用 jquery 实现了它，但我需要单独使用 javascript 来实现它。 代码：-

我希望按钮帮助沿 div 向左或向右水平滚动。如何做。 我通过这种方式使用 jquery 实现了它：-

 $('#right-button').click(function() { event.preventDefault(); $('#content').animate({ scrollLeft: "+=200px" }, "slow"); }); $('#left-button').click(function() { event.preventDefault(); $('#content').animate({ scrollLeft: "-=200px" }, "slow"); });

 .outer { display: flex; overflow-x: hidden; overflow-y: hidden; } .inner { flex: 0 0 25%; height: 100px; margin: 10px; } .paddle { position: absolute; top: 50px; bottom: 0; width: 30px; height: 20px; } .lefty { left: 0; } .righty { right: 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer" id="content"> <button class="lefty paddle" id="left-button"></button> <div class="inner" style="background:red"></div> <div class="inner" style="background:green"></div> <div class="inner" style="background:blue"></div> <div class="inner" style="background:yellow"></div> <div class="inner" style="background:orange"></div> <button class="righty paddle" id="right-button"></button> </div>

Answer 1

你只需要使用translateX如下：另外，我强烈建议你不要使用 js 来制作像这样简单的动画。

 const container = document.querySelector(".container"); const lefty = document.querySelector(".lefty"); let translate = 0; lefty.addEventListener("click", function() { translate += 200; container.style.transform = "translateX(" + translate + "px" + ")"; }); const righty = document.querySelector(".righty"); righty.addEventListener("click", function() { translate -= 200; container.style.transform = "translateX(" + translate + "px" + ")"; });

 .outer { overflow-x: hidden; overflow-y: hidden; } .container { display: flex; transition: transform .4s ease-in; } .inner { flex: 0 0 25%; height: 100px; margin:10px; } .paddle { position: absolute; top: 50px; bottom: 0; width: 30px; height:20px; } .lefty { left: 0; z-index:1; } .righty{ right: 0; z-index:1; }

 <button class="lefty paddle" id="left-button"></button> <div class="outer" id="content"> <div class="container"> <div class="inner" style="background:red"></div> <div class="inner" style="background:green"></div> <div class="inner" style="background:blue"></div> <div class="inner" style="background:yellow"></div> <div class="inner" style="background:orange"></div> </div> </div> <button class="righty paddle" id="right-button"></button>

Answer 2

使用scrollTo滚动元素：

 var content = document.getElementById('content'), scrollStep = 200; document.getElementById('right-button').addEventListener('click', function(e) { e.preventDefault(); let sl = content.scrollLeft, cw = content.scrollWidth; if ((sl + scrollStep) >= cw) { content.scrollTo(cw, 0); } else { content.scrollTo((sl + scrollStep), 0); } }); document.getElementById('left-button').addEventListener('click', function(e) { e.preventDefault(); let sl = content.scrollLeft; if ((sl - scrollStep) <= 0) { content.scrollTo(0, 0); } else { content.scrollTo((sl - scrollStep), 0); } });

 .outer { display: flex; overflow-x: hidden; overflow-y: hidden; } .inner { flex: 0 0 25%; height: 100px; margin:10px; } .paddle { position: absolute; top: 50px; bottom: 0; width: 30px; height:20px; } .lefty { left: 0; } .righty{ right: 0; }

 <div class="outer" id="content"> <button class="lefty paddle" id="left-button"></button> <div class="inner" style="background:red"></div> <div class="inner" style="background:green"></div> <div class="inner" style="background:blue"></div> <div class="inner" style="background:yellow"></div> <div class="inner" style="background:orange"></div> <button class="righty paddle" id="right-button"></button> </div>

事实证明，MS Edge 和 IE 不支持scrollTo()方法。

Answer 3

这是使用核心 javascript 进行自定义水平滚动的解决方案

在 .html 中

 <div class="pull-left mt-sm">
                      <i class="icon-arrow-left pointer" onclick="scrollLeft()"></i>
                </div>   

 <div #widgetsContent class="custom-slider-main">
        <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
    </div>

<div class="pull-right mt-sm">
    <i class="icon-arrow-right pointer" onclick="scrollRight()"></i>
    </div>

在 .css 中

.custom-slider-main{
    display: flex;
    overflow: hidden;    
    scroll-behavior: smooth;
}

 .info-box{
    width: 50px;
    height:50px
 }

在 .js 中

让widgetsContent = document.getElementById("widgetsContent")

并单击左/右按钮使用以下功能

scrollLeft(){
    widgetsContent.nativeElement.scrollLeft -= 150;
  }

  scrollRight(){
    widgetsContent.nativeElement.scrollLeft += 150;
  }

Answer 4

您可以仅将其用于滚动，但动画将是分开的。

document.getElementById("right-button").addEventListener("click", function() 
{
  $('#content').animate({ scrollLeft: "+=200px" }, "slow");
});

document.getElementById("left-button").addEventListener("click", function(){
  $('#content').animate({ scrollLeft: "-=200px" }, "slow");
});