在不禁用滚动功能的情况下防止 iOS 反弹

2024-01-22

我正在尝试实现一种解决方案,以防止当网页内容大于视口时,iOS 版 Safari 中出现 iOS 反弹效果。

我正在处理的页面的结构非常具体,并且与此页面非常相似http://new.salt.ch/ http://new.salt.ch/

  • 基本结构是基于引导程序的。
  • 它的顶部有一个固定的导航栏。
  • 它有一个全屏背景幻灯片。
  • 幻灯片有一个固定在视口底部的覆盖层。
  • 有一个页脚元素可以在画布外加载,并且仅在滚动内容时可见。
  • 内容在导航栏后面滚动。
  • 内容由位于导航栏下方 20 像素处的标题和位于视口上方 20 像素处的一系列按钮组成。
  • 滚动时,按钮和标题都会向上移动屏幕以显示页脚。

我遇到的问题与页面上的问题相同http://new.salt.ch/ http://new.salt.ch/当您向上滚动时,您会在屏幕底部看到反弹效果,并显示背景和覆盖层。

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

我总是遇到同样的问题......当我尝试禁用弹跳时,所有滚动都会被禁用。我猜测这是因为内容(页脚除外)总是足够大,不需要滚动,因此滚动被禁用,并且页脚不再可以在滚动时访问。


此代码应该停止弹跳,因为弹跳的是 HTML 标记

html {
    height  : 100%;
    overflow: hidden;
    position: relative;
}
body {
    height  : 100%;
    overflow: auto;
    position: relative;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在不禁用滚动功能的情况下防止 iOS 反弹 的相关文章

  • 可以禁用幻灯片的触摸模拟但不能禁用滚动条(危险的滑动器)吗?

    我的页面上有一个危险的滑动器 它成功地模拟了幻灯片和随附滚动条上的触摸事件 允许单击鼠标并移动以向左或向右滑动幻灯片 这很好 但我现在在滑动器内的幻灯片上调用了可拖动 这意味着我需要停止此触摸模拟 拖动幻灯片并同时移动它们会引起混乱 但仅限
  • 如何知道 .keyup() 是否是字符键(jQuery)

    如何知道 keyup 是否是字符键 jQuery input keyup function if key is a character such as a b A b c 5 3 2 etc not enter key or shift o
  • 从链接打开本地文件夹

    如何通过单击任何链接打开本地文件夹视图 我尝试了很多选择 例如 a href Open folder a or a Open folder a or a Open folder a 解决方案 启动可下载链接 以下内容适用于所有浏览器 但一如
  • HTML5 文件 API 和 AJAX 上传分块问题

    我编写了一个带有单独进度的拖放多个文件上传等 除了一件事之外 它工作得非常好 上传较大文件时 有时浏览器会锁定 直到上传完成 我认为这是因为该文件存储在浏览器的内存中并占用了浏览器可用的所有资源 我想知道 是否可以逐段读取文件并在读取时通过
  • 如何在html中定义条件换行符?

    我希望这根绳子断在 如果需要的话 没有地方可以写了 7 380 Ft 159 Ft term kd jjal like 7 380 000 Ft 159 125 Ft term kd jjal 如何在html中实现这一点 nbsp 产生 错
  • 如何在React中动态分配属性?

    这是一个有两个参数的函数 我要创建的标签的名称 具有以下属性的对象 Using React 我创建一个组件并将该元素渲染到 DOM 问题是我想向元素添加属性 但它不允许循环在元素内设置属性 var Element function elem
  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • iOS:如何创建核心数据库的备份副本?以及如何导出/导入该副本?

    我想为我的应用程序的用户提供创建核心数据数据库备份的可能性 特别是在他切换到新设备等情况下 我该怎么做呢 特别是如何重新导入该文件 我的意思是 假设他制作了数据库的备份副本 然后更改了大量内容并想要重置为以前保存的备份副本 我该怎么做呢 T
  • Firebase + Node.js:错误:找不到 XMLHttpRequest 兼容性库

    Firebase Node js On iOS 安装的 Node js npm 安装 firebase save 节点测试 js 其中 test js 是一个非常简单的连接到 Firebase 的脚本 var firebase requir
  • Google 地图 API - 地图未显示 - 没有错误

    我正在尝试将地图从 Google API 加载到 div 中 但是 地图未加载 并且没有输出任何错误 这是代码 google maps var geocoder map function codeAddress address geocod
  • iOS 搜索栏不显示结果

    更新 这实际上有效 我的自定义单元格的样式尚未出现 因此单元格看起来是空白的 那我怎样才能得到searchResultsTableView使用我的自定义单元格 我在表格视图中实现了搜索栏 当我调试时搜索 过滤所有工作 但是当我在搜索栏中输入
  • 使用flex-basis控制行上显示的项目数

    我想在使用 Flex 时将元素推出以隐藏它们 例如 如果flex basis为 50 仅显示两个项目弯曲到给定空间 而其他元素则在overflow hidden 领土 Or if flex basis为 25 则仅显示 4 个 Flex 元
  • Facebook 登录打开错误的应用程序

    我正在尝试使用 facebook 实现应用程序的登录 但每次我尝试登录时 它都建议打开错误的应用程序 我尝试了一些在这里找到的东西 但没有成功 在 Facebook 的开发者页面上我添加了一个后缀 我的 plist 如下 有谁知道发生了什么
  • 我自己的而不是从其他网站借用的图像的正确 img src 是什么?

    在我的计算机上 保存 css 和 html 文件的文件夹还包含一些我想要插入到 html 中的图像 如果我从其他网站借用图像 我知道如何获取图像的 URL 如何获取文件夹中但尚未出现在互联网上的图像的 URL 我是否必须将图像上传到其他网站
  • 如何制作像 Facebook 应用程序一样的登录屏幕?

    如何制作像 Facebook 应用程序一样带有 电子邮件 和 密码 文本字段的登录屏幕 Facebook登入 http extdesenv com wp content uploads 2012 05 facebook login ios
  • 如何安全地重命名 iOS 分发配置文件?

    我几个小时前刚刚提交了我的第一个应用程序 现在处于 等待审核 状态 但我犯了一个错误 我已经命名了我的分配配置文件My Company Distribution Profile 我应该做的事情被命名为我的发行版配置文件My GAME Dis
  • 如何在 TypeScript 中使用 navigation.replace ?

    我试图在我的代码中使用它 const navigation useNavigation navigation replace AllFriends 但我不断收到错误消息 Property replace does not exist on
  • 带有自定义字体的 UILabel 错误呈现

    在我的 iPhone 应用程序中 我为所有 UILabel 设置了自定义字体 更准确地说 我对 UILabel 进行了子类化 重写了一个方法 在该方法中设置了自定义字体 然后将 IB 中的所有标签设置为该自定义类 现在的问题是 所有文本都渲
  • 将网站加载到 DIV 中

    当我在文本框中写入 URL 然后单击提交按钮时 如何实际从网站检索数据 我希望将数据放入我拥有的 div 中 这可能吗 我已经尝试过这个 但它不起作用

随机推荐