如何在滾動時補償 android 移動瀏覽器的隱藏地址欄？ 如何在所有瀏覽器中正確測量“vh”？
[英]How to compensate for hidden address bar of android mobile browsers on scroll? How to correctly measure 'vh' in all browsers?
問題描述
有沒有辦法/jQuery 方法來分別測量視口高度？
地址欄顯示時為一個 vh，地址欄隱藏時為另一個 vh？
var vhAdBarPresent = $(window).height();
var vhAdBarHidden = $(window).height();
我在谷歌上搜索了這個問題並偶然發現了各種文章，他們通過從常規 100vh 中添加或減去 56px 來手動補償地址欄。 這是我們唯一的選擇嗎？ 56px僅適用於 chrome 其他瀏覽器可能有不同的地址欄高度...
我想要做的就是制作一個可拖動的底部導航，默認情況下它保持在底部，一旦使用手柄向上拖動，它就會覆蓋整個視口。 但頁腳只是拒絕留在底部。
你可以在我的Github Demo上看到我面臨的問題。 在 android chrome 中打開（它在桌面瀏覽器上按預期工作，但在滾動時隱藏地址欄的移動瀏覽器中，它會中斷。）
在這個演示中，我試圖在屏幕底部對齊頁腳。 但是當頁腳被拖動/頁面滾動時，它不位於底部。
這是供您參考的代碼...
$(function() { var dragFlag = 0; var navPos = Math.round(0.93 * $(window).height()); var dragUL = Math.round(0.2 * navPos); var dragLL = Math.round(0.8 * navPos); console.log(dragFlag); var $draggable = $('.draggable').draggabilly({ axis: 'y', handle: '.handle' }); var draggie = $('.draggable').data('draggabilly'); $draggable.on('dragEnd', function(event, pointer) { var dragPosY = Math.round(draggie.position.y); console.log("DPY: " + dragPosY + "; NP: " + navPos + "; dUL: " + dragUL + "; dLL: " + dragLL); if (dragFlag === 0) { if (dragPosY > dragLL) { $draggable.draggabilly('setPosition', 0, navPos); dragFlag = 0; console.log(dragPosY + "DPY > DLL" + dragLL + "; DF:" + dragFlag); } if (dragPosY < dragLL) { $draggable.draggabilly('setPosition', 0, 0); dragFlag = 1; console.log(dragPosY + "DPY < DLL" + dragLL + "; DF:" + dragFlag); } } else if (dragFlag === 1) { if (dragPosY > dragUL) { $draggable.draggabilly('setPosition', 0, navPos); dragFlag = 0; console.log(dragPosY + "DPY > DLL" + dragLL + "; DF:" + dragFlag); } if (dragPosY < dragUL) { $draggable.draggabilly('setPosition', 0, 0); dragFlag = 1; console.log(dragPosY + "DPY < DLL" + dragLL + "; DF:" + dragFlag); } } }); });
* { box-sizing: border-box; } html, body { margin: 0; padding: 0 } #content { background: #222; color: #ddd; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 300vh; width: 100%; padding-bottom: 60px; } #footer { background: #f00; color: #ddd; height: 130vh; display: flex; width: 100%; flex-direction: column; position: fixed; left: 0; bottom: calc(-130vh + 7vh); } .handle { background: #0ff; color: #222; display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 7vh; width: 100%; box-shadow: inset #cf0 0 3px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>BotNav</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://unpkg.com/draggabilly@2/dist/draggabilly.pkgd.min.js"></script> <style> *{box-sizing: border-box;} html,body{margin: 0; padding:0} #content{ background:#222; color:#ddd; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 300vh; width: 100%; padding-bottom: 60px; } #footer{ background: #f00;color: #ddd; height: 130vh; display: flex; width: 100%; flex-direction: column; position: fixed; left: 0; bottom: calc(-130vh + 7vh); } .handle{ background: #0ff; color:#222; display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 7vh; width: 100%; box-shadow: inset #cf0 0 3px; } </style> <script> $(function(){ var dragFlag = 0; var navPos = Math.round(0.93*$(window).height()); var dragUL = Math.round( 0.2*navPos ); var dragLL = Math.round( 0.8*navPos ); console.log(dragFlag); var $draggable = $('.draggable').draggabilly({ axis: 'y', handle:'.handle' }); var draggie = $('.draggable').data('draggabilly'); $draggable.on( 'dragEnd', function( event, pointer ) { var dragPosY = Math.round(draggie.position.y); console.log("DPY: "+dragPosY+"; NP: "+navPos+"; dUL: "+dragUL+"; dLL: "+dragLL); if(dragFlag === 0) { if(dragPosY>dragLL){ $draggable.draggabilly('setPosition',0,navPos); dragFlag = 0; console.log(dragPosY+"DPY > DLL"+dragLL+"; DF:"+dragFlag); } if(dragPosY<dragLL){ $draggable.draggabilly('setPosition',0,0); dragFlag = 1; console.log(dragPosY+"DPY < DLL"+dragLL+"; DF:"+dragFlag); } } else if(dragFlag === 1) { if(dragPosY>dragUL){ $draggable.draggabilly('setPosition',0,navPos); dragFlag = 0; console.log(dragPosY+"DPY > DLL"+dragLL+"; DF:"+dragFlag); } if(dragPosY<dragUL){ $draggable.draggabilly('setPosition',0,0); dragFlag = 1; console.log(dragPosY+"DPY < DLL"+dragLL+"; DF:"+dragFlag); } } }); }); </script> </head> <body> <footer id="footer" class="draggable"> <div class="handle"> <span>Handle1</span> <span>Handle2</span> <span>Handle3</span> </div> <div class="footContent">Foot Content</div> </footer> <div id="content"> <div>Content Top</div> <div>Content Bottom</div> </div> </body> </html>
如果我們能以某種方式提取當前視口高度，我們的生活會容易得多...... :(
1 個解決方案
解決方案1
1 2019-11-27 11:30:57
您可以利用 JavaScript 中的innerHeight變量。 每當進行可見性更改時，這都會更新瀏覽器界面。
let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--actualVh', `${vh}px`);
section { height: calc(var(--actualVh, 1vh) * 100); } .item { align-items: center; display: flex; height: calc(100% / 5); justify-content: center; color:white; } .item:nth-child(odd) { background-color: pink; } .item:nth-child(even) { background-color: lightblue; }
<section> <div class="item">One</div> <div class="item">Two</div> <div class="item">Three</div> <div class="item">Four</div> <div class="item">Five</div> </section>
如何在移動瀏覽器中隱藏方向更改時隱藏瀏覽器地址欄？
[英]How to hide the browser address bar on orientation change in mobile browsers?
在 Android 上的移動瀏覽器中向下滾動時，站點不會隱藏地址欄
[英]Site doesn't hide address bar when scroll down in mobile browsers on Android
在chrome瀏覽器或其他帶有URL欄的瀏覽器中滾動時，如何使用自適應“ vh”大小而不出現頁面“跳轉”
[英]How to work with responsive 'vh' sizes without the page “jumping” when scrolling in chrome browsers or other browsers with a URL bar
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.