Как прокрутить div с событием щелчка?

Question

Можно ли прокрутить div с событием щелчка? https://codepen.io/yarekc/pen/zYqOVbG

let e = new Event({
  type:"click"
});
$("#container").trigger(e);
console.log('clicked !');

#contaner {
  width: 100px;
  height: 100px;
  background:yellow;
  overflow-y:scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contaner">
  <p>1hello world</p>
  <p>2hello world</p>
  <p>3hello world</p>
  <p>4hello world</p>
  <p>5hello world</p>   
  <p>6hello world</p>
  <p>7hello world</p>
  <p>8hello world</p>
  <p>9hello world</p>
  <p>10hello world</p>      
</div>

Я пытаюсь записать события мыши, а затем воспроизвести. Мне просто интересно, могу ли я записывать события мыши (щелчок, перемещение, касание, ...), как пользователи ведут себя во время просмотра.

Answer 1

Можно попробовать что-то подобное. Кнопки css и предназначены только для демонстрации.

$('.btn').click(function() {
  let up = $('#container').scrollTop() + 30;    //change as you like
  $("#container").scrollTop(up);
});

.btn {
  position: fixed;
  top: 40px;
  right: 40px;
}

#container {
  width: 100%;
  height: 100px;
  overflow: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">SCROLL</button>
<div id="container">
  <p>1hello world</p>
  <p>2hello world</p>
  <p>3hello world</p>
  <p>4hello world</p>
  <p>5hello world</p>
  <p>6hello world</p>
  <p>7hello world</p>
  <p>8hello world</p>
  <p>9hello world</p>
  <p>10hello world</p>
</div>