个人中心
gpt4 book ai didi

javascript - 如何补偿滚动时android移动浏览器的隐藏地址栏？如何在所有浏览器中正确测量 'vh'？

转载 作者：太空宇宙 更新时间：2023-11-04 05:42:19 30 4
gpt4 key购买 nike

有没有一种方法/jQuery 方法可以单独测量视口(viewport)高度？

本地址栏显示时一个 vh，本地址栏隐藏时另一个 vh？

var vhAdBarPresent = $(window).height();
var vhAdBarHidden = $(window).height();

我用谷歌搜索了这个问题，无意中发现了各种文章，其中他们通过从常规 100vh 中添加或减去 56px 来手动补偿地址栏。这是我们唯一的选择吗？ 56px 仅适用于 chrome 其他浏览器可能具有不同的地址栏高度...

我想做的就是制作一个可拖动的底部导航，它默认位于底部，一旦使用 handle 向上拖动，它就会覆盖整个视口(viewport)。但是页脚只是拒绝留在底部。

您可以在我的 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>

如果我们能以某种方式提取当前的视口(viewport)高度，我们的生活就会容易得多......:(

最佳答案

您可以利用 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>

Source

关于javascript - 如何补偿滚动时android移动浏览器的隐藏地址栏？如何在所有浏览器中正确测量 'vh'？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59068919/

30 4 0
文章推荐： python - 直接 "plot"线段到numpy数组
文章推荐： c - strncat 看起来像是在跨调用时保存数据？
文章推荐： c - 多个 execlp 不工作
文章推荐： python - 如何将 Pandas 数据框中所有 Categorica 类型的列编码为虚拟变量
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com