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

Question

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

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

我正在寻找一个简单的解决方案，它可以帮助我知道什么时候有和什么时候没有使用“overflow:auto”在容器上滚动css 属性.

注意：我不想依赖调整大小属性。我想用纯 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>

Answer 2

我认为您要寻找的只是一种检查 "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>

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

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

javascript

css

resize

overflow

auto