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

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

在桌面上，滚动一切都很好。然而，在手机上(尤其是在iPad上(，任何向下滚动的尝试都会使页面回到顶部。我注意到，如果我克服了跳跃(这很难(，让页面向下滚动，这样标题就看不见了，那么滚动就可以正常工作，所以可能是标题中的某些东西造成的。无论出于什么原因，我都无法在桌面上复制，因为devtools设置为移动维度，只能在移动设备上复制(但可能这只是我没有正确使用devtools(。

下面是一段屏幕录音(在iPad上(来演示这个问题：https://vimeo.com/661613444

以下是关于我的设置的一些基本信息：

Bokeh web应用程序，使用Flask在html模板(base.html(中呈现Bokeh内容。除了用于导航按钮的Bootstrap类之外，标头还使用Bootstrap container-fluid类。我还有一个自定义的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

很乐意根据需要提供任何其他详细信息。

无论何时向上滚动浏览器地址栏，都会隐藏移动网页位置的地址栏。你可以看到这个视频

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

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

上面的代码是从stackoverflow 复制的

只要ios显示/隐藏地址栏，就可能触发bokeh-2.4.1.min.js中的调整大小事件。

你可以通过以下方式复制它：

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

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

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

如果页面滚动在桌面上工作，以及iOS中出现的问题，可以用哪个来推理。

在iOS 15.5中发现软件错误或第三方应用程序出现故障。--在更新到iOS 15.5后，一些iPhone在滚动时总是返回到任何页面或应用程序的最顶部，就好像有人总是在触摸iPhone的最顶部区域一样。如果你正在处理一个bug，并且问题是在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";
  }
}

将Bokeh升级至bokeh==3.0.2(或最新版本(。不需要额外的html、css或js。

相关内容

最新更新

热门标签：