如何通过点击事件滚动一个div？

Question

Is it possible to scroll a div with a click event? 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>

I am trying to record mouse events and then playback. I just wonder if recording mouse events (click, move, touch,...) I can playback how users behaves while browsing.

Answer 1

You can try something like this. The css and buttons are just for demonstration.

 $('.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>