Я хотел бы создать вертикальный контейнер с «бесконечной» прокруткой для группы изображений.
Вот что я сделал до сих пор:
$("#container").on("scroll", function(e) {
if (e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight) {
$(this).scrollTop(0)
}
})#container {
position: absolute;
left: 2%;
top: 2%;
width: 10%;
height: 90%;
border: 2px solid black;
overflow-x: hidden;
overflow-y: scroll;
}
.image {
width: 100%;
margin-bottom: 10%;
}
#container {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
#container::-webkit-scrollbar {
display: none;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "container">
<img class = "image" src = "https://streamdata.io/wp-content/uploads/2018/04/stack-overflow-orange.png">
<img class = "image" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScZ51RNyVfUEnqQECgs-S-lzgCCA64GCIwtcHmvBwGw6hjgPL29A">
<img class = "image" src = "https://streamdata.io/wp-content/uploads/2018/04/stack-overflow-orange.png">
<img class = "image" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScZ51RNyVfUEnqQECgs-S-lzgCCA64GCIwtcHmvBwGw6hjgPL29A">
<img class = "image" src = "https://streamdata.io/wp-content/uploads/2018/04/stack-overflow-orange.png">
<img class = "image" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScZ51RNyVfUEnqQECgs-S-lzgCCA64GCIwtcHmvBwGw6hjgPL29A">
<img class = "image" src = "https://streamdata.io/wp-content/uploads/2018/04/stack-overflow-orange.png">
</div>Мне удалось реализовать прокрутку в одном направлении, но я не знаю, как реализовать верхнюю прокрутку. Также у меня возникли проблемы, потому что scrollTop(0) выглядит довольно отрывисто и не каждый раз работает должным образом.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Может это вам поможет:> Бесконечный цикл горизонтальной прокрутки изображения