How to scroll a div with a click event?

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.

Recording user events is done by pushing Objects into an Array. Every object has a `type` property with the type name of the event, the time, and data which can differ from type to type. Storing a scroll could be done storing the time, element, and it's scrollTop value. Than to replicate, if the event was of type `"scroll"` you can use the `Element.scrollTo()` JS method. — Roko C. Buljan, Aug 04 '20 at 14:17
Does this answer your question? [Set scroll position](https://stackoverflow.com/questions/4192847/set-scroll-position) — Anthony, Aug 04 '20 at 14:19
No it does not answer. The goal is to record mouse and keyboard events. When you move your mouse and make clicks.. you make clicks and not scrolls. The final Goal is to reproduce what user does: keyboard typing, mouse moving and mouse clicking. Not "scrolls" — yarek, Aug 04 '20 at 21:09

score 0 · Answer 1 · answered Aug 04 '20 at 14:35

0

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>

answered Aug 04 '20 at 14:35

Pranav Rustagi

2,604
1
5
18

The goal is to do that WITHOUT scrollTop : JUST with CLICK event. Imagine I want to record mouse events: I will not know that when a mouse click is triggered, it will call the scrollTop function. – yarek Aug 04 '20 at 21:07
Sorry but I don't understand you. Can you elaborate a little more? – Pranav Rustagi Aug 05 '20 at 08:02
Can this be done with CLICK only : like simulate a click event on the scroll bar ? (without calling scrollTop function) – yarek Aug 05 '20 at 12:05

How to scroll a div with a click event?

1 Answers1