移动滚动，页面跳转到顶部。

Question

移动滚动，页面跳转到顶部。

5

我的网站应用程序在这里：https://www.snowpacktracker.com/btac/snowpacktracker。

在桌面上，滚动一切正常。然而，在移动设备上（特别是在iPad上），任何尝试触摸滚动都会将页面弹回顶部。我注意到如果我克服了跳跃性（这很困难）并让页面向下滚动，以使头部不可见，那么滚动就可以正常工作，因此可能是头部的某些内容导致了问题。出于某种原因，我无法在设置为移动尺寸的开发工具上重现此问题，在移动设备上才能复现（但也许这只是我没有正确使用开发工具）。

这里是一个屏幕录制（在iPad上）来演示这个问题： https://vimeo.com/661613444 这是关于我的设置的一些最小信息： Bokeh web应用程序，使用Flask在html模板中呈现Bokeh内容（base.html）。标题栏使用 Bootstrap 的 container-fluid 类，除此之外还使用了 Bootstrap 的导航按钮类。我还有一个自定义的 style.css 用于覆盖基本模板中的某些类。值得注意的是在 style.css 中：

.placeholderbokehapp-snowpack {
  background-color: white;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  min-height: 300px;
}

.container-fluid {
  padding-right: 20px;
  padding-left: 20px;
  min-width: 1100px;
}

除了引入 Bokeh、jQuery、Popper 和 Bootstrap 等 js 库外，我还使用自定义的 js 代码来定义加载时的旋转动画，并使用一个调整大小传感器来在页面尺寸更改时停止旋转动画。

bokeh==2.4.1、Flask==1.1.2、jquery==3.3.1、popper==1.14.3、bootstrap==4.1.3。

如果需要，我很乐意提供任何额外的细节信息。

- pjw

你找到任何解决方案了吗？我也遇到了类似的问题。 - sanket

@Sanket，目前还没有找到解决方案，很遗憾这仍然是我的问题。 - pjw

@sanket 找到解决方案了。将 Bokeh 升级到最新版本。 - pjw

4个回答

2

可能是因为iOS显示/隐藏地址栏时，bokeh-2.4.1.min.js中的resize事件被触发。

您可以通过以下方式模拟：

在Chrome的设备工具栏中查看网站
使视口足够小，以便内容溢出
向下滚动
垂直调整视口大小

您会看到内容滚动到顶部。

不幸的是，如果这被证明是问题所在，我没有解决方案。也许有一种方法可以禁用iOS的地址栏的显示/隐藏。如果失败，您可能需要编辑bokeh.js以防止它在调整大小时更改滚动位置。

- Moob

是的，这是一个很好的观点。Bokeh现在已经更新到3.0.2，所以我可以尝试升级。 - pjw

0

将 Bokeh 升级到 bokeh==3.0.2（或更高版本）。不需要任何额外的 HTML、CSS 或 JS。

- pjw

0

如果在桌面上页面滚动正常，但在iOS上出现问题，那么可能是由以下原因引起的。

iOS 15.5中发现的软件漏洞或第三方应用程序故障。 -- 在更新到iOS 15.5后，一些iPhone在滚动时总是返回到任何页面或应用程序的最顶部，就像有人总是触摸iPhone的最顶部区域。如果您遇到了这个问题，并且问题是在iOS 15.5更新后开始出现的，您可能需要更新到iOS 15.6。
由跌落引起的硬件问题。
磨损的屏幕保护器可能会导致绿色顶部出现幽灵触摸。
对于过紧的手机壳或保护框也是如此。

如果您无法解决问题，最好的解决方案是使用Nav元素粘性。

<div class="sticky-top">...</div>

滚动时收缩标题 >

标题

<div id="header">Header</div>

添加 CSS：

.container-fluid {
  padding: 50px 10px; /* Some padding */
  text-align: center; /* Centered text */
  font-size: 90px; /* Big font size */
  position: fixed; /* Fixed position - sit on top of the page */
  top: 0;
  width: 100%; /* Full width */
  transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}

添加 JavaScript：

// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.fontSize = "30px";
  } else {
    document.getElementById("header").style.fontSize = "90px";
  }
}

- pr96

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user19955356 · Accepted Answer

每当您向上滚动浏览器时，地址栏会隐藏，从而改变网页的位置。您可以在视频中看到这一点。

一个简单的解决方法是防止地址栏隐藏。

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

上述代码是从stackoverflow复制的。