如何通過點擊事件滾動一個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>