I wanna listen to scroll event on a specific element, so that there will be an arrow icon indicating more messages below after the user scrolled up the messages box. Exactly like the Youtube live chat image above.

Or is there an another way doing this?

I wanna listen to scroll event on a specific element, so that there will be an arrow icon indicating more messages below after the user scrolled up the messages box. Exactly like the Youtube live chat image above.

Or is there an another way doing this?

• javascript

2 Answers 2

You can listen for a scroll event on any element using the following code:

element.addEventListener("scroll", function(){
    // do stuff
});

You can then get the current scroll position of that element by using element.scrollTop

From here, you can check to see if the element's scroll position is less than its total height. If it is, display your button to scroll back down. On click of the button with the down arrow, you simply use element.scrollTo() which even has built in easing effects in modern browsers. Just pass the scroll value as the height of the containing element.

You can use the scroll event triggered by the div and attach an event listener with addEventListener().

Here is an example that dynamically adds more items to a list when the user scrolls to the bottom.

To detect when the user reaches the bottom, use scrollHeight - scrollTop === clientHeight.

If you want to scroll to the bottom, just set scrollTop = scrollHeight.

const list = [];
const ul = document.querySelector('ul');
const len = document.querySelector('span');
const button = document.querySelector('button');

button.addEventListener('click', () => {
  ul.scrollTop = ul.scrollHeight;
});

const appendBlock = () => {
  if (list.length >= 200) return;
  list.push(...Array.from({ length: 20 }, (_, i) => i + list.length));
  ul.innerHTML = list.map(i => `<li>Elem ${i}</li>`).join('');
  len.textContent = list.length;
}

ul.addEventListener('scroll', event => {
  const e = event.target;
  if (e.scrollHeight - e.scrollTop === e.clientHeight) {
    appendBlock();
  }
});

appendBlock();

#container {
  position: relative;
  border: 1px solid black;
  border-radius: 5px;
}
ul {
  height: 110px;
  overflow: auto;
}

button {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: #08f;
  color: white;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
}

<div id="container">
  <ul></ul>
  <button>↓</button>
</div>
<br>
Number of items: <span id="len"></span>