How to see when "overflow: auto;" turns from "scroll" to "none" - simple solution

Question

First of all, sorry for my bad English.

What can I do with the code below?
- I can see the first state of my containers:
first : true - I have scroll
second : undefined - I do not have scroll
What I want to do ?
- I want to see when my containers changes their states :
if I start resizing the height of my containers I do not know when my "overflow:auto" - goes from scroll to none or from none to scroll.

I am looking for a simple solution that will help me know when I have and when I do not have the scroll on the container using the "overflow:auto" css property.

Note : I prefer not to depend on the resize property. And I want to do this with pure javascript :) (no plugins, no libraries).

Thank you!

(function(){
      var first = document.getElementById('first');
      var second = document.getElementById('second');


      console.log(hasScroll(first));
      console.log(hasScroll(second));

  })();

function hasScroll(element){
      if (element.scrollHeight > element.offsetHeight) {

          return true
      }
}

#first, #second{
  vertical-align: top;
  display: inline-block;
  margin: 0px 20px;
  border: 2px solid;
  width: 300px;
  height: 100px;
  resize: vertical;
  overflow: auto;
}

#second{
    height: 400px;
}

<div id="first">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt in erat vitae porta. Sed elementum rutrum mi. Praesent iaculis sagittis lorem, sagittis rhoncus quam pellentesque sed. Pellentesque quis fermentum neque. Aliquam varius varius elit vitae pulvinar. Nulla facilisi. Vivamus imperdiet tempus dictum. Proin vitae rhoncus mauris. Donec in tincidunt libero. Suspendisse nisl justo, vestibulum sit amet vehicula nec, accumsan rutrum ex.
</div>
<div id="second">
Ut vitae nisi aliquam est interdum sagittis sit amet sed ligula. Aenean eu lobortis ante. Vestibulum varius erat eu mauris ultricies, a ultrices orci consectetur. In ut urna consectetur risus porta porttitor. Nulla luctus hendrerit finibus. Integer quis nunc lacinia est rhoncus pulvinar. Phasellus mauris lorem, ultricies eu purus et, accumsan molestie neque. In at tempor tellus. Fusce urna nibh, volutpat eget ultrices lobortis, luctus ac urna. Suspendisse potenti. Phasellus fringilla ligula ut tortor efficitur bibendum. Vivamus faucibus est et tellus cursus consectetur. Mauris in ornare velit, ut imperdiet risus. Vestibulum id scelerisque dui, vitae iaculis elit.
</div>

Answer 1

i got the answer for you:

(function() {
    var first = document.getElementById('first');
    var second = document.getElementById('second');

    function onDivChange(div, callback)
    {
        new MutationObserver(callback).observe(div, { attributes: true });
    }

    function hasScroll(e)
    {
        return e.scrollHeight > e.offsetHeight;
    }

    onDivChange(first, function(){console.log(hasScroll(first))});
    onDivChange(second, function(){console.log(hasScroll(second))});
})();

It makes use of the MutationObserver to check if the size changed.

You can register an element with an callback(event) which will get called everytime the element changed. So if we register the elements and add an function we can check if we have an scroll or not. Hope it helped.

Here is an example:

(function()	{
    var first = document.getElementById('first');
	var second = document.getElementById('second');
	
	function onDivChange(div, onChange)
	{
		new MutationObserver(onChange).observe(div, { attributes: true });
	}

	function hasScroll(e)
	{
		return e.scrollHeight > e.offsetHeight;
	}

	onDivChange(first, function(){console.log(hasScroll(first))});
	onDivChange(second, function(){console.log(hasScroll(second))});
})();

#first, #second{
        vertical-align: top;
        display: inline-block;
        background-color: coral;

        margin: 20px 20px;
        border: 2px solid;
        padding: 20px;
        width: 300px;
        height: 100px;
        
        resize: vertical;
        overflow: auto;
    }

    #second{
        background-color: #FF69B4;
        height: 400px;
    }

<div id="first">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="second">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>