jQuery移动固定页脚滚动文本一次，然后停止在iOS应用程序 [英] jQuery Mobile Fixed Footer Scrolls with Text One Time Then Stops in iOS App

问题描述

我已经使用jquery-mobile（1.1.1）和Adobe PhoneGap Build创建了一个iOS应用程序。应用程序有一个固定的页眉和页脚，转换设置为无。页脚包含4个导航按钮，通过javascript导航到应用程序中的四个页面。我使用多页模板，所以有一个HMTL文件。

最初，我使用data-position：fixed ，但在页面之间切换时遇到一些不需要的闪烁和页面跳转。所以，我切换到使用CSS将页眉和页脚固定到屏幕（如此帖中所述： https://github.com/jquery/jquery-mobile/issues/4024 ）。这解决了闪光的问题，但介绍了一个不同的。

问题是：第一次我滚动文本，在任何页面上，页脚随文本一起移动固定）。但只有第一次 - 从那时起，每当我滚动文本，页脚保持固定，因为它应该。要澄清这里的几个例子：

示例1

• 打开应用程序，在第一页滚动文字 - 页脚移动。


• 切换到第二页，滚动文本 - 页脚保持固定。 ul>
  
  

  示例2

  
  
  
  
  
  • 打开应用程序，切换到第二
  
  
  • 切换回第一页，页脚保持固定。
  
  
  
  
  

  另一件我应该提到的 - 如果我启用页面转换，那么问题只发生在第一页。例如。如果应用加载并且我没有先滚动第一页上的文本就切换到另一个页面，页脚保持固定，因为它应该。

  
  
  

  任何建议，这将非常感谢。感谢。

  解决方案

  我刚刚遇到完全相同的问题，并修复它使用下面的黑客当应用程序启动。注意，我们运行这个.js代码片段之前，我们手动隐藏启动屏幕与Phonegap / Cordova方法。这将防止在用户看到主屏幕之前发生任何闪烁/移位。

    function fixJqmScrollBug（）{
   window。 scrollTo（0，1）; 
   setTimeout（function（）{
   window.scrollTo（0，0）; 
   if（navigator& navigator.splashscreen）navigator.splashscreen.hide（）
  } ，20）; 
  } 
    

  这段代码模拟了第一次打破固定页脚的初始滚动，但将其恢复到默认位置。我们不得不稍微延迟重新定位回滚动（0,0）的修复工作 - 因此20毫秒超时。

  
  

  I have created an iOS application using jquery-mobile (1.1.1) and Adobe PhoneGap Build. The app has a fixed header and footer and transitions are set to "none". The footer contains 4 navigational buttons, which provide navigation via javascript to the four pages within the app. I used a multi-page template, so there is a single HMTL file.

  Originally, I was positioning the header and footer on the screen using "data-position:fixed", but was experiencing some unwanted flashing and page jumps when switching between pages. So, I switched to using CSS to fix the header and footer to the screen (as outlined in this post: https://github.com/jquery/jquery-mobile/issues/4024). This solved the flashing issue, but introduced a different one.

  The problem is: the first time I scroll text, on any page, the footer moves along with the text (i.e. it does not stay fixed). But only the first time - from then on, whenever I scroll the text, the footer stays fixed as it should. To clarify, here a couple of examples:

  Example 1

  • Open app, scroll text on first page - footer moves.
  • Switch to second page, scroll text - footer remains fixed.

  Example 2

  • Open app, switch to second page without scrolling on first page - footer moves on second page.
  • Switch back to first page, footer remains fixed.

  One other thing I should mention - if I enable page transitions, then the issue only happens on the first page. For example. if the app loads and I switch to another page without first scrolling the text on that first page, the footer remains fixed as it should.

  Any suggestions on a way to fix this would be greatly appreciated. Thanks.

  解决方案

  I just ran into the exact same issue and fixed it using the following hack when the app fires up. Note that we run this .js snippet before we manually hide the splash screen with the Phonegap/Cordova method. This should prevent any flickering/shifting before the user sees the home screen.

  function fixJqmScrollBug() {
      window.scrollTo(0, 1);
      setTimeout(function() {
          window.scrollTo(0, 0);
          if( navigator && navigator.splashscreen ) navigator.splashscreen.hide()
      }, 20);
  }
  

  This code simulates the initial scroll that breaks your fixed footer the very first time, but puts it back to the default position. We had to put a slight delay on the repositioning back to scroll of (0,0) for the fix to work - hence the 20ms timeout.

  这篇关于jQuery移动固定页脚滚动文本一次，然后停止在iOS应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！