CSS中滾動容器與固定Tabbar自適應的幾種方法實現
發(fā)布時間：2023-09-07 15:45:33 作者：cookcyq 
我要評論
我要評論本文主要介紹了CSS中滾動容器與固定Tabbar自適應的幾種方法實現，主要介紹了三種方法，文中通過代碼示例介紹的非常詳細，感興趣的可以了解一下
問題
- 容器高度使用 px 定高時，隨著頁面高度發(fā)生變化，組件展示的數量不能最大化的鋪滿，導致出現底部留白。
- 容器高度使用 vw 定高時，隨著頁面寬度發(fā)生變化，組件展示的數量不能最大化的鋪滿，導致出現底部留白。
很明顯這兩種方案都是采用 錯誤的像素單位 而導致的，下面我將會介紹如何使用其它方案來解決。
方式1：采用 padding
給最外層的容器定好 padding，子容器后續(xù)以 padding 為基準，案例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body {
margin: 0; padding: 0;
}
* {
box-sizing: border-box;
}
.main {
padding-top: 100px;
padding-bottom: 100px;
}
.container .component {
width: 200px;
height: 200px;
margin-bottom: 10px;
background: orange;
}
header, footer {
position: fixed;
height: 100px;
background: red;
left: 0; right: 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
</style>
</head>
<body>
<div class="main">
<header>
Header Tabbar
</header>
<div class="container">
<div class="component">1</div>
<div class="component">2</div>
<div class="component">3</div>
<div class="component">4</div>
<div class="component">5</div>
<div class="component">6</div>
<div class="component">7</div>
<div class="component">8</div>
<div class="component">9</div>
<div class="component">10</div>
</div>
<footer>
Footer Tabbar
</footer>
</div>
</body>
</html>效果：
即保留了原生滾動（不用設置 overflow），也實現了自適應，解決了底部留白的問題。
在 header 不固定但 footer 固定的情況下，可將容器的 padding-top 去掉只保留 padding-bottom 即可。
方式2：采用 vh
其實，header 不用 fixied 也能達到吸頂效果，其原理是，給容器定高 + overflow 實現自己的滾動容器，但如果使用了錯誤的單位，比如本文一開始說的 vw，就會導致留白情況：
我們可以采用 vh 單位來解決，案例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body {
margin: 0; padding: 0;
}
* {
box-sizing: border-box;
}
.container {
height: 65vh;
overflow: auto;
}
.container .component{
width: 200px;
height: 200px;
margin-bottom: 10px;
background: orange;
}
header {
height: 100px;
background: pink;
}
footer {
position: fixed;
height: 100px;
background: red;
left: 0; right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="main">
<header>
Header Tabbar
</header>
<div class="container">
<div class="component">1</div>
<div class="component">2</div>
<div class="component">3</div>
<div class="component">4</div>
<div class="component">5</div>
<div class="component">6</div>
<div class="component">7</div>
<div class="component">8</div>
<div class="component">9</div>
<div class="component">10</div>
</div>
<footer>
Footer Tabbar
</footer>
</div>
</body>
</html>高度未發(fā)生變化前：
高度發(fā)生變化后：
方式3：采用 JS getBoundingClientRect 動態(tài)計算
像 vh、vw 這類動態(tài)計算 px 的單位在 IE9 前是不支持的，這里可以考慮借助 JS 提供的 getBoundingClientRect 函數來實現。
它會返回當前元素的寬高、top/left 偏離值，我們可以根據兩個元素之間的 top 值相減來獲取對應的定高，實現組件最大化鋪滿，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body {
margin: 0; padding: 0;
}
* {
box-sizing: border-box;
}
.container {
overflow: auto;
}
.container .component{
width: 10vw;
height: 10vw;
margin-bottom: 10px;
background: orange;
}
header {
height: 100px;
background: pink;
}
footer {
position: fixed;
height: 100px;
background: red;
left: 0; right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="main">
<header>
Header Tabbar
</header>
<div id="container" class="container">
<div class="component">1</div>
<div class="component">2</div>
<div class="component">3</div>
<div class="component">4</div>
<div class="component">5</div>
<div class="component">6</div>
<div class="component">7</div>
<div class="component">8</div>
<div class="component">9</div>
<div class="component">10</div>
</div>
<footer id="footer">
Footer Tabbar
</footer>
</div>
<script>
addEventListener("DOMContentLoaded", (event) => {
const footerDom = document.getElementById('footer')
const containerDom = document.getElementById('container')
const { top: footerOffsetTop } = footerDom.getBoundingClientRect();
const { top: containerOffsetTop } = containerDom.getBoundingClientRect();
const scrollHeight = footerOffsetTop - containerOffsetTop;
containerDom.style.height = scrollHeight + 'px'
});
</script>
</body>
</html>頁面高度未發(fā)生變化前：
頁面高度發(fā)生變化后：
到此這篇關于CSS中滾動容器與固定Tabbar自適應的幾種方法實現的文章就介紹到這了,更多相關CSS 滾動容器與固定Tabbar自適應內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了css scroll-snap控制滾動元素的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2023-02-22
這篇文章主要介紹了純CSS實現的三種通知欄滾動效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2021-02-19
這篇文章主要介紹了使用純 CSS 實現滾動陰影效果,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-04- 這篇文章主要介紹了純css3實現橫向無限滾動的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2020-11-06
這篇文章主要介紹了CSS實現導航固定的、左右滑動的滾動條制作方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考2020-06-29
