時間：2022-07-27 23:30:01 | 來源：網(wǎng)站運(yùn)營
時間：2022-07-27 23:30:01 來源：網(wǎng)站運(yùn)營
在線咨詢
<body> <div class="header"></div> <div class="main"></div> <div class="footer"></div></body>根據(jù)頁面滾動的位置分為兩種布局，一種是滾動 body，另一種是固定 body 的高度為100%，在 main 中滾動。body { overflow: auto;}.header,.footer { position: fixed; left: 0; right: 0; height: 44px;}.header { top: 0;}.footer { bottom: 0;}.main { height: 100%; padding: 44px 0;}第一種情況比較適合長列表頁面，整個頁面除了 header 和 footer 之外都需要滾動，但很多時候，我們只希望頁面的某個元素滾動，這個時候，就采取第二種布局方式。html, body { height: 100%; overflow: hidden;}.header,.footer { position: fixed; left: 0; right: 0; height: 44px;}.header { top: 0;}.footer { bottom: 0;}.main { height: 100%; padding: 44px 0; box-sizing: border-box;}fixed 定位實現(xiàn)起來簡單，在大多數(shù)瀏覽器中也能正常顯示，但是 fixed 定位在移動端會有兼容性問題，后面會提到，所以不建議這種實現(xiàn)方式。<body> <div class="main"></div> <div class="header"></div> <div class="footer"></div></body>但這樣顯然不太符合一般人的思維習(xí)慣，代碼可讀性降低。<body> <div class="header"></div> <div class="main"> <div class="scroll-container"></div> </div> <div class="footer"></div></body><style> .main { overflow: hidden; } .scroll-container { height: 100%; overflow: auto; }</style>body { padding: 44px 0;}.main { padding: 0;}2. 給 fixed 節(jié)點(diǎn)設(shè)置 z-index.header,.footer { z-index: 8888;}看到這里可能會有小伙伴覺得，一個簡單的布局，還要繞過這么多坑，難道沒有簡單的方式嗎，答案當(dāng)然是肯定的，那就是第三種實現(xiàn)方式，flex 布局。flex 定位在移動端兼容到了 iOS 7.1+，Android 4.4+,如果使用 autoprefixer 等工具還可以降級為舊版本的 flexbox ，可以兼容到 iOS 3.2 和 Android 2.1。而且用 flex 實現(xiàn)起來相對簡單，在各個瀏覽器里表現(xiàn)也相對一致。實現(xiàn)如下:body { display: flex; flex-direction: column;}.main { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch;}.header { height: 44px;}.footer { height: 44px;}inputElement.addEventListener('input', function(event) { let regex = /[^1-9a-zA-Z]/g; event.target.value = event.target.value.replace(regex, ''); event.returnValue = false});這段代碼在 Android 上是沒有問題的，但是在 iOS 中，input 事件會截斷非直接輸入，什么是非直接輸入呢，在我們輸入漢字的時候，比如說「喜茶」，中間過程中會輸入拼音，每次輸入一個字母都會觸發(fā) input 事件，然而在沒有點(diǎn)選候選字或者點(diǎn)擊「選定」按鈕前，都屬于非直接輸入。var inputLock = false;function do(inputElement) { var regex = /[^1-9a-zA-Z]/g; inputElement.value = inputElement.value.replace(regex, '');}inputElement.addEventListener('compositionstart', function() { inputLock = true;});inputElement.addEventListener('compositionend', function(event) { inputLock = false; do(event.target);})inputElement.addEventListener('input', function(event) { if (!inputLock) { do(event.target); event.returnValue = false; }});@mixin commonStyle() { background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%; background-repeat: no-repeat; background-position: top, right top, bottom, left top;}@mixin border($border-color) { @include commonStyle(); background-image:linear-gradient(180deg, $border-color, $border-color 50%, transparent 50%), linear-gradient(270deg, $border-color, $border-color 50%, transparent 50%), linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%), linear-gradient(90deg, $border-color, $border-color 50%, transparent 50%);}@mixin hairline-common($border-radius) { position: relative; z-index: 0; &:before { position: absolute; content: ''; border-radius: $border-radius; box-sizing: border-box; transform-origin: 0 0; }}@mixin hairline($direct: 'all', $border-color: #ccc, $border-radius: 0) { @include hairline-common($border-radius); &:before { transform: scale(.5); @if $direct == 'all' { top: 0; left: 0; width: 200%; height: 200%; box-shadow: 0 0 0 1px $border-color; z-index: -1; } @else if $direct == 'left' or $direct == 'right' { #{$direct}: 0; top: 0; width: 0; height: 200%; border-#{$direct}: 1px solid $border-color; } @else { #{$direct}: 0; left: 0; width: 200%; height: 0; border-#{$direct}: 1px solid $border-color; } }}關(guān)鍵詞：移動
客戶&案例
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
