Question

我一直在一个运作良好的网站上工作，禁止我将来解决的一些优化问题;你可以在那里看到它：http://robin-v.net/

我今天面临的问题是，在移动浏览器上 - 至少在iOS上，我最近还没能尝试使用Android，但我听说它的表现相似 - 滚动导致浏览器滞后很多，地址栏表现得很奇怪。

无论何时滚动，在滚动过程中都不会发生任何奇怪的事情，但只要您将手指从屏幕上抬起，浏览器就会冻结片刻，然后地址栏切换其状态 - 如果可见则会崩溃，副-versa。我知道无论何时向下滚动，地址栏都会崩溃，但无论滚动方向如何，每当滚动时，地址栏都会从隐藏切换为可见。（根据浏览器的不同，地址栏可能永远不会隐藏，并且在100％的时间内保持可见。）

我不知道可能导致这种行为的原因......当前在线的网站版本几乎没有JS（它与滚动无关）。我很确定这是由于CSS声明，但我不知道哪个。

说实话，我对网络开发比较陌生，而且我自己学习，所以我确定我必须在某处做错事，但我不知道是什么。我在另一个网站上遇到了同样的问题，所以这可能是我从某个地方得到的习惯，我应该摆脱它。

从我收集的内容来看，我认为它可能与html或body元素的声明有关，或者与溢出或定位有关...... 但是＆＃ 39;我所拥有的一切。：/

我粘贴下面的基本结构元素的代码，但我甚至不确定问题在于它们。

HTML

<body class="home blog">
    <div id="main">
        <div id="scenes">
            ...
        </div>
        <div id="slidewrapper">
            <div id="rightsec" class="mainsec">
                ...
            </div>
               <div id="leftsec" class="mainsec">
                ...
            </div>
    </div>
</div>
</body>

CSS（Sass）

html {
    box-sizing: border-box;
    font-size: 125%;
    text-size-adjust: 100%;
    line-height: 1.4;
}

body {
    background: #000;
}

#main {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#scenes {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
    width: 100%;
    margin: auto;
    pointer-events: none;
}

#slidewrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
}

.mainsec {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#leftsec {
    z-index: 1;
    left: calc(60px - 100%);
}

#rightsec {
    z-index: 2;
    right: calc(60px - 100%);
}

干杯！

Answer 1

好吧，这似乎都是由包含具有固定大小的内容的元素引起的，填满整个屏幕（在这种情况下，#main是100vw * 100vh）和overflow: hidden。滚动时，#main内的内容会移动，但文档本身不会移动，因为它不大于视口。这就是为什么地址栏也不会移动的原因。

我设法在另一个网站上修复了这个问题，但不幸的是，由于我的主页结构（我在问题中链接了），我看不出我怎么能在那里改变它。如果有人有想法，请随时分享！

在移动设备上滚动（iOS）会导致延迟，浏览器地址栏表现得很奇怪（隐藏并重新出现）

1 个答案: