css overflow-scroll-with-padding (Webkit VS Firefox)

1777 ワード

padding overflow css

シーン:コンテナがあり、幅が一定で、内側の余白があり、コンテナの内容(サブエレメント)がコンテナを超えたときにスクロールバーが表示されます.このシーンはChromeとFirefox(IE)で一致せず、border-boxレイアウトです.コードは次のとおりです.




    
    title
    


    
        これはタイトルです

Chrome 74

Firefox 67

IE 11

可以看到，Chrome 会将滚动容器的下内边距（padding-bottom）一起作为滚动内容，而 Firefox 和 IE 不会。
我们期望得到的是 Chrome 的行为。为了让 Firefox,IE 与 Chrome 变现一致，有如下解决方案：

解决方案1
利用 css3 选择器，为滚动容器内最后一个元素添加 margin-bottom （前提：最后一个元素为块级元素，最后一个元素不能 display: none;）

.box {
    padding-bottom: 0;
}
.box > :last-child {
    margin-bottom: 30px;
}

ソリューション2スクロールコンテナに擬似クラスを追加

.box {
    padding-bottom: 0;
}
.box::after {
    content: "";
    display: block;
    height: 30px;
    width: 100%;
}

ソリューション3スクロールコンテナにhtml要素をコンテナとして追加しpadding-bottomと書き、内容をすべてこの要素に書きます

.box {
    padding-bottom: 0;
}
.con-wrap {
    padding-bottom: 30px;
}


    
        これはタイトルです

太ももの皆さん、より良い解決策を提案してください.