Question

我在视图中有一个div，如果它溢出，我只想显示它的滚动条。我也想显示边框，但只有它溢出。

我使用CSS类

找出了滚动条部分

.conditional-scrollbars {
    overflow: scroll;
    overflow-y: auto;
    overflow-x: auto;
}

有没有办法只显示div边框溢出？

当滚动条可见时是否会触发事件？

Answer 1

建立Adam's answer。您可以根据height的{{1}}添加边框。以下是我从Adam's answer添加的代码：

div

您可以采用相同类型的方式删除边框。

＆＃13;

if ($('.conditional-scrollbars').height() >= 100) {
    $('.conditional-scrollbars').css('border', '2px solid #ddd')
}

＆＃13;

$('#addTxt').on('click', () => {
    $('.conditional-scrollbars').append('<p>Hello world!</p>');
	if ($('.conditional-scrollbars').height() >= 100) {
    	$('.conditional-scrollbars').css('border', '2px solid #ddd')
    }
});

＆＃13;

.conditional-scrollbars {
    overflow: scroll;
    overflow-y: auto;
    overflow-x: auto;
    max-width:100px;
    max-height:100px;
    
    /* for demo */
    min-width: 50px;
    padding: 2px;
}
p {
    margin:0px;
}

＆＃13;

Answer 2

我发现了一些有用的东西。我将此函数添加到js文件

<ENQUEUE>

然后我只是在元素填充后检查它。如果hasScrollBar函数返回true，我通过css类为元素添加边框。

Answer 3

我认为您正在寻找max-height（和max-width）

/* Using jQuery to write faster */
$('#addTxt').on('click', () => {
    $('.conditional-scrollbars').append('<p>Hello world!</p>');
});

.conditional-scrollbars {
    overflow: scroll;
    overflow-y: auto;
    overflow-x: auto;
    max-width:100px;
    max-height:100px;
    
    /* for demo */
    border: 2px solid #ddd;
    min-width: 50px;
    padding: 2px;
}
p {
    margin:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="conditional-scrollbars"></div>
<button id="addTxt">add text</button>

仅当div可滚动时才向div添加边框

3 个答案: