How to determine with vanilla javascript that a
is scrollable?

Question

This question is inaccurately answered here (Detect if the DIV have scroll bar or not [duplicate]) and in other questions on SO.

The answers don't take into account that the content of the div may have a float that isn't cleared afterwards. The div.clientHeight and div.scrollHeight can't be used for detecting scrolling behaviour. Like in the following example:

window.addEventListener("load",function(){
  var div = document.querySelector(".container");
  document.querySelector(".clientHeight").innerHTML = div.clientHeight;
  document.querySelector(".scrollHeight").innerHTML = div.scrollHeight;
});

.container{
  width: 50px;
  min-height: 20px;
  border: 1px solid red;
}
.floated{
  float: left;
}

<table>
  <thead>
    <tr>
      <th>clientHeight</th>
      <th>scrollHeight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="clientHeight"></td>
      <td class="scrollHeight"></td>
    </tr>
  </tbody>
</table>
<div class="container">
  <div class="floated">Lorem ipsum dolor sit amet blah blah blah blah blah</div>
</div>

Codepen

Are you just referring to vertical scroll? Or scroll in general? — jasper, Nov 21 '19 at 13:55
If you know a solution for vertical scroll, it's enough for me i guess. I could probably take off from there. — Otakar Beinhauer, Nov 21 '19 at 14:12

score 0 · Accepted Answer · answered Nov 21 '19 at 14:13

0

Check if the parent container has overflow-y, overflow-x or overflow that's either auto or scroll.

javascript for checking if horizontally scrollable:

const container = document.getElementByClassName('container');
const overflowY = getComputedStyle(div).overflowY;
const verticallyScrollable = overflowY === "auto" || overflowY === "scroll";

answered Nov 21 '19 at 14:13

jasper

937
1
9
22

I need to flag the div as scrollable only if its content is actually overflowing it. "overflow: auto" would mark almost all divs as scrollable, since it is the default. Am I correct? – Otakar Beinhauer Nov 21 '19 at 14:19
`Overflow: auto` is not the default, `overflow: none` is – jasper Nov 21 '19 at 14:20
Basically i am looking if there is a scrollbar, but I didn't want to formulate my question like that, since I think there might be devices that do not display scrollbars. – Otakar Beinhauer Nov 21 '19 at 14:23
So you want to check **dynamically** if the child element is larger than the parent element? – jasper Nov 21 '19 at 14:24
1

Oh, you're right. (overflow: visible is actually the default). I guess, it's the right answer then. – Otakar Beinhauer Nov 21 '19 at 14:27
I'd like to know, if there is a element scrolling when wheel event fires. – Otakar Beinhauer Nov 21 '19 at 14:29

How to determine with vanilla javascript that a is scrollable?

1 Answers1

How to determine with vanilla javascript that a
is scrollable?