Javascript “如何看何时”;溢出:自动&引用;从;卷轴;至;“无”简单解

Javascript “如何看何时”;溢出:自动&引用;从;卷轴;至;“无”简单解,javascript,css,resize,overflow,auto,Javascript,Css,Resize,Overflow,Auto,首先,很抱歉我的英语不好 我可以用下面的代码做什么 -我可以看到容器的第一个状态: 第一:true-我有滚动条 第二:未定义-我没有滚动 我想做什么 -我想查看容器何时更改其状态: 如果我开始调整容器高度的大小,我不知道我的“溢出:自动”何时从滚动变为无,或从无变为滚动 我正在寻找一个简单的解决方案,它可以帮助我使用“overflow:auto”css属性了解容器上何时有滚动条以及何时没有滚动条 注意:我不喜欢依赖resize属性。我想用纯javascript做到这一点:)(没有插件,没有库)

首先,很抱歉我的英语不好

我可以用下面的代码做什么
-我可以看到容器的第一个状态:
第一:
true
-我有滚动条
第二:
未定义
-我没有滚动
我想做什么
-我想查看容器何时更改其状态:
如果我开始调整容器高度的大小,我不知道我的“
溢出:自动
”何时从
滚动
变为
,或从
变为
滚动

我正在寻找一个简单的解决方案,它可以帮助我使用“
overflow:auto
”css属性了解容器上何时有滚动条以及何时没有滚动条


注意:我不喜欢依赖resize属性。我想用纯javascript做到这一点:)(没有插件,没有库)

谢谢大家!

(函数(){
var first=document.getElementById('first');
var second=document.getElementById('second');
console.log(hasScroll(第一));
console.log(hasScroll(第二个));
})();
函数hasScroll(元素){
if(element.scrollHeight>element.offsetHeight){
返回真值
}
}
#第一,第二{
垂直对齐:顶部;
显示:内联块;
利润率:0px 20px;
边框:2倍实心;
宽度:300px;
高度:100px;
调整大小:垂直;
溢出:自动;
}
#第二{
高度:400px;
}

Lorem ipsum dolor sit amet,是一位杰出的献身者。在埃拉特维塔波尔塔的奎斯克·汀西登。金樱子。牛膝草,牛膝草。佩伦茨克发酵罐。普尔文纳优质葡萄。无便利。即兴发言。罗诺斯·莫里斯的生命。在tincidunt libero的Donec。悬挂式nisl justo,前庭位于nec车辆上,accumsan rutrum ex。
但是,生活在矢状体之间的不平等性是不平等的。埃尼安·欧罗波尔蒂斯·安特。前庭是一种特殊的或连续的。在乌尔纳,我们需要一个港口。纳拉·卢库斯·亨德雷特·菲尼布斯。整只猫是枕大肌。Phasellus mauris lorem,ultricies eu purus et,accumsan molestie neque。在临时电视台。乌尔纳·尼布、乌尔特里斯·洛博蒂斯、乌尔纳。潜力悬钩子。弗林吉亚叶舌粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺粉刺。福西布斯和泰勒斯·卡塞特图的生活。奥纳·维利特(ornare velit)的莫里斯(Mauris),乌特·维利特斯(ut Imperisus)。前庭标识:权杖对,精英生命。

我为您找到了答案:

(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检查大小是否改变

您可以使用回调(事件)注册一个元素,该回调将在每次元素更改时被调用。因此,如果我们注册元素并添加一个函数,我们可以检查是否有滚动条。 希望有帮助

以下是一个例子:

(函数(){
var first=document.getElementById('first');
var second=document.getElementById('second');
函数onDivChange(div,onChange)
{
新的MutationObserver(onChange).observe(div,{attributes:true});
}
哈斯克罗尔函数(e)
{
返回e.scrollHeight>e.offsetHeight;
}
onDivChange(首先是function(){console.log(hasScroll(first))});
onDivChange(第二个,function(){console.log(hasScroll(第二个))});
})();
#第一,第二{
垂直对齐:顶部;
显示:内联块;
背景颜色:珊瑚;
利润率:20px 20px;
边框:2倍实心;
填充:20px;
宽度:300px;
高度:100px;
调整大小:垂直;
溢出:自动;
}
#第二{
背景色:#FF69B4;
高度:400px;
}

知识是一种美德,是一种美德,是一种美德,是一种美德。但是,在最低限度上,我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡。
知识是一种美德,是一种美德,是一种美德,是一种美德。但是,在最低限度上,我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡。
知识是一种美德,是一种美德,是一种美德,是一种美德。但是,在最低限度上,我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡。

我认为您要寻找的只是一种检查div中是否使用了“overflow:auto”属性的方法,您可以使用JQuery来实现这一点

if($('#MyFirstDiv').css('overflow')=='auto'){
console.log('haveit')
}
if($('SecondDiv').css('overflow')!='auto'){
console.log('没有它')
}
.myTest{
溢出:自动;
}

这有溢出

这并不重要


您有没有尝试过任何东西,但被卡住了?或者你想让我们为你做这件事?我不知道该怎么做。我不知道如何“倾听”那个“溢出:自动”的变化:(。我查了一下,但没有找到相关的东西或能给我一个开始的想法。也许我只是度过了糟糕的一天。