Как увидеть, когда «переполнение: авто;»превращается из «прокрутки» в «нет» - простое решение

Question

Прежде всего, извините за мой плохой английский.

Что я могу сделать с кодом ниже?
- я вижу первое состояние своих контейнеров:
first : true - у меня есть свиток
second : undefined - я не вижуесть свиток
Что я хочу сделать?
- я хочу видеть, когда мои контейнеры изменяют свои состояния:
если я начну изменять размеры своих контейнеров, я не знаю, когда мой "overflow:auto" - изменится с scroll на none или сnone до scroll.

Я ищу простое решение , которое поможет мне узнать, когда у меня есть и когда у меня нет прокрутки на контейнере с помощью "overflow:auto "css property.

Примечание: я предпочитаю не зависеть от свойства resize.И я хочу сделать это с помощью чистого JavaScript :) (без плагинов, без библиотек).

Спасибо!

(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

Я думаю, что все, что вы ищете, это способ проверить, используется ли свойство div "overflow: auto" в div, вы можете использовать JQuery для этого

if($('#MyFirstDiv').css('overflow') == 'auto') {
   console.log('has it')
}

if($('#SecondDiv').css('overflow') != 'auto') {
   console.log('Does not have it')
}

.myTest{
overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="MyFirstDiv" class="myTest">
<p id="p1">This has overflow</p>
</div>

<div id="SecondDiv">
<p id="p2">This does not </p>
</div>

Answer 2

я получил ответ для вас:

(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))});
})();

Он использует MutationObserver, чтобы проверить, изменился ли размер.

Вы можете зарегистрировать элемент с обратным вызовом (событие), котороебудет вызываться каждый раз, когда элемент изменился.Поэтому, если мы зарегистрируем элементы и добавим функцию, мы сможем проверить, есть ли у нас прокрутка или нет.Надеюсь, что это помогло.

Вот пример:

(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>