水平滾動100px

Question

Heyjo，

問題 ：我正在尋找一個javascript或jQuery代碼，因為一周后我的網站上實現了一個滾動按鈕。 我失敗的那一刻是按鈕應該多次工作：他的任務不是滾動到一個專用元素，它應該向左滾動，例如，100px。 此外，滾動應該在適當的部分中平滑地進行（換句話說，動畫）。

我嘗試了什么 ：直到現在我試圖用$('#idofsection').animate({scrollLeft: 100}, 800)完成這項任務，但顯然它不起作用。 問題是，人們不能多次使用它，它只是滾動到我的部分中的位置。 之后我使用了javascript的scrollBy(100, 0)或scrollLeft += 100px ，但遺憾的是沒有讓它順利滾動。

我希望有人可以幫助我，因為我花了很多時間在這個問題上而沒有找到解決方案。 非常感謝，斯文

Answer 1

因此，使用動畫屬性 +=從當前位置調整它。

 $("#next").click(function(){ $('#foo').stop().animate({scrollLeft: "+=100"}, 800); return false; }); 

 div { width: 200px; overflow: auto; padding: 1em; border: 1px solid black; } div p { width: 1000px; border: 2px dashed #000; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="foo"> <p>TEST</p> </div> <button id="next">Next</button> 

Answer 2

您可以像嘗試一樣使用scrollBy（100,0），並將此css屬性添加到要滾動的視口中：

scroll-behavior: smooth;

 .window{ width: 200px; height: 100px; border: 1px red solid; overflow: hidden; scroll-behavior: smooth; } .container{ width: 1000px; height: 200px; } .buttons{ width: 200px; display: flex; flex-direction: row; justify-content: space-between; } 

 <div id="window" class="window"> <div class="container"> fjsdlf jslkd flsakj flksad jflkjsa dlfj slakd jflskad flksdaj lfk sadlkfj asldk fslkad fjlkasd flksa jdlf jsadlkfj slkda jflksadj flksa jdlkfj sadlk jflksadj flksjadflksadj flksdaj flksdaj flksdaflksjdflk sjdalkfj skdal fjlksadj flksa fklsjadfklj sadklfj salkdjf lksadj flksjad lfkj sadlkf jslakdjf lksdaj flkasj flkjsa dlfskal flsa jdas lkfjskad fj </div> </div> <div class="buttons"> <button onclick="document.getElementById('window').scrollBy(-100,0)"> <- </button> <button onclick="document.getElementById('window').scrollBy(100,0)"> -> </button> </div> 

解決方案也在這里： JSFiddle