javascript - 如何查看“溢出：自动；” 从“滚动”变为“无” - 简单的解决方案

Question

首先，对不起我的英语不好。

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

我正在寻找一个简单的解决方案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>

标签： javascriptcssresizeoverflowauto

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>