javascript - 如何使用单击事件滚动 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>

我正在尝试记录鼠标事件然后播放。我只是想知道是否记录鼠标事件（单击、移动、触摸......）我可以回放用户在浏览时的行为方式。

标签： javascriptjquerymouseeventjquery-events

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>