防止地址欄隱藏在移動瀏覽器中

Question

我目前正在開發一個水平布局的網站。 所有元素都是 position：絕對是 javascript。 它們的大小是用 window.innerHeight 計算的。 我的問題是，盡管元素不高於窗口的高度，但我可以向下滾動（地址欄的高度）。 這在兩個方面令人討厭。 首先，它觸發了我當時既不想也不需要的窗口調整大小事件。 其次，它不適用於某些內容應該可以垂直滾動的內容框。 有時我可以滾動框，但有時會先滾動整個頁面（如前所述：地址欄的高度）。 是否有任何解決方案可以讓我在所有設備上阻止這種地址欄自動隱藏機制。

預先感謝！

這根本不可滾動： http://maxeffenberger.de/test.html

這可以水平滾動（可以看到隱藏的內容），但也可以垂直滾動，直到地址欄被隱藏（沒有意義，因為沒有額外的“垂直”內容需要更多空間： http://maxeffenberger.de/test2 .html

Answer 1

這是我實現它的方式：

html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}

Answer 2

在您的頁面上使用此樣式代碼。現在您的 chrome 網址欄不會隱藏。它將停止滾動。

<style type="text/css">
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>

Answer 3

如果有人仍然遇到隱藏地址欄的問題，這就是我的工作方式。

 html, body {
    height: 100%;
 }

 body {
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
        -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
 }

 .background {
    position: fixed;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
 }

我嘗試了很多類似的代碼，但 android chrome 正在殺死我。 只有這對我有用。 當您在頁面底部有導航時，自動隱藏欄是主要問題。

Answer 4

這在 iOS 15 中為我做到了。雖然我的 web 應用程序禁用了縮放。 頂欄和底欄始終為全尺寸。

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi, minimal-ui' />

Answer 5

唯一對我有用的解決方案是：

將您的正文內容放入具有以下樣式的包裝器中：


.wrapper {
    position: absolute;
    top: 0.5px;
    left: 0;
    right: 0;
    bottom: 0.5px;
    overflow-x: hidden; /* or any other value */
    overflow-y: auto; /* or any other value */
}

半像素偏移將不可見，但它們會阻止瀏覽器將主體視為可滾動的，從而阻止地址欄隱藏。

Answer 6

最可靠的解決方案可能是使用全屏 API： http : //updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

Answer 7

以下對我有用：

HTML

<body>
    <div> This is the container for all content. </div>
</body>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    ⋮
}

body > div {
    position: absolute;
    left: 0;
    top: 0;
    
    box-sizing: border-box;
    
    width: 100%;
    height: CALC(100% + 1px);
    
    overflow-x: hidden;
    overflow-y: auto;

    ⋮
}

Answer 8

所以這是問題所在，我想避免某個元素上的滾動效果。 對於這個元素，我剛剛設置：

.disable-scroll {  
     overflow-y: hidden;  
     touch-action: pan-x; 
}

它適用於 Chrome 和小米默認瀏覽器，但不適用於 Firefox。

Answer 9

另一種使用自定義滾動條的方法：

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #bdbdbd;
}

html,
body {
    height: 100%;
    margin: 0;
}
html {
    overflow: hidden;
}
body {
    overflow-y: auto;
}

Answer 10

使用 window.innerHeight 為您的站點設置邊界

您可以將html和body或您的包裝器設置為

var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

請記住，它需要在每次調整大小時更新！

window.innerHeight允許您獲取瀏覽器視圖（無瀏覽器欄）內部的實際高度。 您可以在欄可見時或什至隱藏（向下滑動）時實現內容的高度。

就我而言：
1. 通過 CSS 將body設置為100vh 。
不幸的是， vh忽略了瀏覽器欄，這會在移動設備上造成一些麻煩，這些瀏覽器在滾動時/后隱藏欄的現代瀏覽器。 看一看在。

這也是我對上述問題的解決方案。

2. 用指定的函數通過 JS 計算准確的高度。 每次調整大小時更新！
=> 網站的內容現在僅限於視圖的內部部分。

在手機上：
安卓 7.1.1/ Chrome 61.0 iOS 9.3.5/ Safari

=> 現在瀏覽器欄不再隱藏在滾動和滑動事件上。

請記住：
它是唯一的工作，當你不使用一些庫，導致相信你滾動水平，但實際上是用body.height。

Answer 11

使用 javascript window.scrollTo(0, 1); 你可以解決這個問題。

查看http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/以獲取解決方案。

防止地址欄隱藏在移動瀏覽器中

問題描述

11 個解決方案

解決方案1
45 2015-11-27 09:18:22

解決方案2
13 2018-07-18 06:34:44

解決方案3
3 2019-02-06 21:05:48

解決方案4
2 2022-03-04 02:05:36

解決方案5
1 2020-05-08 16:26:04

解決方案6
0 2013-08-08 09:46:07

解決方案7
0 2021-06-28 19:47:38

解決方案8
0 2021-12-11 22:36:45

解決方案9
0 2022-08-13 12:18:39

解決方案10
-1 2018-01-31 12:48:07

解決方案11
-3 2013-08-05 15:18:47

防止地址欄隱藏在移動瀏覽器中

問題描述

11 個解決方案

解決方案1 45 2015-11-27 09:18:22

解決方案2 13 2018-07-18 06:34:44

解決方案3 3 2019-02-06 21:05:48

解決方案4 2 2022-03-04 02:05:36

解決方案5 1 2020-05-08 16:26:04

解決方案6 0 2013-08-08 09:46:07

解決方案7 0 2021-06-28 19:47:38

解決方案8 0 2021-12-11 22:36:45

解決方案9 0 2022-08-13 12:18:39

解決方案10 -1 2018-01-31 12:48:07

解決方案11 -3 2013-08-05 15:18:47

解決方案1
45 2015-11-27 09:18:22

解決方案2
13 2018-07-18 06:34:44

解決方案3
3 2019-02-06 21:05:48

解決方案4
2 2022-03-04 02:05:36

解決方案5
1 2020-05-08 16:26:04

解決方案6
0 2013-08-08 09:46:07

解決方案7
0 2021-06-28 19:47:38

解決方案8
0 2021-12-11 22:36:45

解決方案9
0 2022-08-13 12:18:39

解決方案10
-1 2018-01-31 12:48:07

解決方案11
-3 2013-08-05 15:18:47