javascript - 如何查看 "overflow: auto;"何时从 "scroll"变为 "none"- 简单解决方案

Question

首先，抱歉我的英语不好。

我可以用下面的代码做什么？
- 我可以看到容器的第一个状态:
首先 : true - 我有滚动条
second : undefined - 我没有滚动条
我想做的事 ？
- 我想看看我的容器什么时候改变它们的状态:
如果我开始调整容器的高度，我不知道什么时候我的“overflow:auto”从scroll 变为none 或从none 到滚动。

我正在寻找一个简单的解决方案，它可以帮助我知道何时使用“overflow:auto”在容器上滚动，何时不滚动css 属性。

注意:我不想依赖于 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

我为你找到了答案:

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