防止iOS弹出而不禁用滚动功能 [英] prevent iOS bounce without disabling scroll ability

问题描述

我试图实现一个解决方案，以防止当网页内容大于视口时iOS的Safari中的iOS退回效果。

我的网页工作在其结构中非常具体，并且非常类似于此页面 http://new.salt.ch/

• 基本结构是基于引导的。


• 顶部有一个固定的导航栏。


• 它有一个全屏背景幻灯片。


• 幻灯片有一个固定在视口底部的叠加层。


• 有一个页脚元素加载画布，只有在滚动内容时才会显示。


• 内容在导航栏后面滚动。


• 内容包含一个位于导航栏下方20px的标题和位于视口上方20px的一系列按钮。


• 滚动时，按钮和标题都会向上移动 //new.salt.ch/\"> http://new.salt.ch/ ，因为当您向上滚动时，屏幕底部会显示反弹效果，并显示背景和叠加。
  
  
  

  我尝试了各种解决方案，包括iNoBounce.js，Nonbounce.js以及我在SO上发现的其他一些建议。

  
  
  

  我有同样的问题总是...当我尝试禁用反弹，所有滚动被禁用。我猜这是因为内容（除了页脚）总是足够大，不需要滚动，因此滚动被禁用，页脚不再是可访问的滚动。

  
  
  

  任何建议都将非常感谢。

  解决方案

  此代码应该停止退回，因为它是HTML标记bounces

    html {
   height：100％; 
   overflow：hidden; 
  } 
   body {
   height：100％; $ b $b overflow：auto; 
  } 
    

  
  

  I am trying to implement a solution to prevent the iOS bounce effect in Safari for iOS when a web page content is larger than the viewport.

  The page I am working on is quite specific in it's structure, and is very similar to this page http://new.salt.ch/

  • The basic structure is bootstrap-based.
  • It has a fixed navbar at the top.
  • It has a full-screen background slideshow.
  • The slideshow has an overlay that is fixed to the bottom of the viewport.
  • There is a footer element that loads off-canvas and is only visible on scrolling the content.
  • The content scrolls behind the navbar.
  • The content consistes of a title which is positioned 20px below the navbar and a series of buttons that are positioned 20px above the viewport.
  • When scrolling, the buttons and title all move up the screen to display the footer.

  The problem I am having is the same as the problem on the page http://new.salt.ch/ in that when you scroll up, you get a bounce effect at the bottom of the screen and which reveals the background and overlay.

  I have tried various solutions, including iNoBounce.js, Nonbounce.js and a few other suggestions I have found on SO.

  I have the same issue always...when I try to disable the bounce, all scrolling gets disabled. I am guessing this is because the content (other than the footer) is always just large enough that the scroll is not needed, and so scrolling gets disabled and the footer no longer is accessible on scroll.

  Any advice would be greatly appreciated.

  解决方案

  This code should stop the bounce as it's the HTML tag that bounces

  html {
      height  : 100%;
      overflow: hidden;
  }
  body {
      height  : 100%;
      overflow: auto;
  }
  

  这篇关于防止iOS弹出而不禁用滚动功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！