当前位置: 首页 > 编程笔记 >

IOS 的弹性滚动解决方案

贾越
2023-03-14
本文向大家介绍IOS 的弹性滚动解决方案,包括了IOS 的弹性滚动解决方案的使用技巧和注意事项,需要的朋友参考一下

所谓弹性滚动就是指在翻动长页面手指离开时,由慢到块,由快到慢的过度。

  安卓平台上的大多数浏览器都默认了该行为

  ios当前还只对<body>下的 overflow 默认产生弹性滚动效果

  前一阵子做了一个手机官网,用到了 <div> 中的 overflow,再调试 ios 中遇到了弹性滚动的问题:

  ios 下 webkit 弹性滚动 css 指令 -webkit-overflow-scrolling: touch;

  该指令再切换同样需要做滚动处理的 div 是会遇到一下情况

  1. 伴随着上一个滚动而滚动

  2. 起始定位偏差

  3. 粘滞的阻塞感(失去焦点)

  解决方案:

 .session{
    -webkit-overflow-scrolling: touch;
  }

  1. 切换标签的同时去掉元素的 overflow-scrolling 属性

$('.session').removeClass('sollow');

  2. 切换标签同时对目标 div 做初始化 

document.getElementById('target').scrollTop = '0px'; // 根据需要添加

  3. 将sollow重新加载到目标html" target="_blank">元素上

$('.session:eq(' + tar + ')').addClass('display sollow');

以上所述是小编给大家介绍的IOS 的弹性滚动解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍IOS上iframe的滚动条失效的解决办法,包括了IOS上iframe的滚动条失效的解决办法的使用技巧和注意事项,需要的朋友参考一下 问题描述:  iframe设置了高度(例如500px)。倘若iframe的内容足够长超出了iframe设定的高度时,在ipad等设备上。iframe内部html的滚动条不出现。并且活生生的从500px处截断,(类似overflow:hidden的效果)

  • 问题内容: 我只是想 禁用 Safari(OSX Lion)中 的弹性滚动/弹跳效果 。 我找到了在CSS中为body 设置的解决方案,但正如预期的那样,它仅 禁用了滚动条 ,因此,如果网站比屏幕“长”,您 将无法滚动! 欢迎任何解决方案或提示!谢谢! 问题答案: 您可以通过应用以下CSS来更普遍地实现这一目标: 这样,无论内容如何,​​都可以在其中滚动,但是请注意,触发事件的滚动上下文现在不是。

  • 本文向大家介绍vue 弹框产生的滚动穿透问题的解决,包括了vue 弹框产生的滚动穿透问题的解决的使用技巧和注意事项,需要的朋友参考一下 最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决。程序员不能被业务绑架,有时间还是花点在代码,开始这次的vue尝试吧。 首先定义一个全局样式: 创建一个dom.js文件,定义几个方法: 获取<html>标签的DOM: 在弹框弹出来的

  • 本文向大家介绍微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,包括了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,供大家参考,具体内容如下 先看效果是否是自己需要的 实现步骤: 1.整个布局用作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性 2.样式文件

  • 本文向大家介绍在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案,包括了在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案的使用技巧和注意事项,需要的朋友参考一下 原因: -webkit-overflow-scrolling:touch 解释: 由于使用-webkit-overflow-scrolling这个属性,苹果手机会使用硬件加速,从而促使页面滑动得更加流畅,然而也导致了页面

  • 本文向大家介绍JavaScript中Textarea滚动条不能拖动的解决方法,包括了JavaScript中Textarea滚动条不能拖动的解决方法的使用技巧和注意事项,需要的朋友参考一下 本文实例分析了JavaScript中Textarea滚动条不能拖动的解决方法。分享给大家供大家参考,具体如下: 在IE中,你是否碰到过Textarea的滚动条不能拖动,但点上下按钮可以滚动内容? 这个问题的原因很

  • 我写了一个相当基本的js函数,它以编程方式自动将iPhone键盘完美地对准每一个聚焦的输入字段(如果你喜欢,可以随意使用它!)。对齐主要由window.scroll处理——这是一种标准方法,适用于任何浏览器视图,UIWebView除外,因此是phonegap/cordova(2.1)。所以我需要一个变通方法。 我的工作代码: 工作在一切,但UIWebView,这是。正如我上面提到的,除了windo

  • 本文向大家介绍详解iOS中position:fixed吸底时的滑动出现抖动的解决方案,包括了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案的使用技巧和注意事项,需要的朋友参考一下 两种抖动 为什么抖动还会有两种? 其实是我碰到过两种抖动的场景,第一个场景是native的抖动,第二个场景是h5的抖动。 native的抖动 前端开发人员会在app中打开webview,这个时候i