oveflow:clip和hidden区别对比实例页面

回到相关文章 »

效果：

overflow:clip

鑫空间鑫生活

overflow:hidden

代码：

CSS代码：

.box {
    height: 200px;
    max-width: 480px;
    outline: 1px solid;
    scroll-behavior: smooth;  
}
.clip {
    overflow: clip;
}
.hidden {
    overflow: hidden;    
}

HTML代码：

<h4>overflow:clip</h4> 
<div class="box clip">
    <img src="mm9.jpg">
    <p>鑫空间鑫生活</p>
</div>

<h4>overflow:hidden</h4> 
<div class="box hidden">
    <img src="mm9.jpg">
    <p>鑫空间鑫生活</p>
</div>

<p><button id="btn" type="primary" is="ui-button">同时设置 box.scrollTop = 9999</button></p>

JS代码：

btn.addEventListener('click', function () {
    document.querySelectorAll('.box').forEach(function (box) {
        box.scrollTop = 9999;
    });
});