javascript - 仅在可滚动时才向 div 添加边框

Question

我在 View 中有一个 div，我只想在它溢出时为其显示滚动条。我也想显示边框，但前提是它会溢出。

我使用 CSS 类设计了滚动条部分

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

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

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

Answer 1

建立于 Adam's answer .您可以根据 div 的 height 添加边框。这是我从 Adam's answer 添加的代码:

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

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

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

.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;
}

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