safari坑之 回弹
博客地址: https://www.seyana.life/post/20
今天在使用safari浏览博客的时候,
发现在拉至顶部并产生回弹之后,头部导航隐藏了,
除非在上拉的时候,刚好达到顶部而不超出产生回弹才会正常显示
这是博客原来隐藏显示头部导航的逻辑
fix: {
inserted(el) {
let beforeScrollTop = document.documentElement.scrollTop ||
window.pageYOffset ||
window.scrollY ||
document.body.scrollTop
window.addEventListener('scroll', _.throttle(() => {
const afterScrollTop = document.documentElement.scrollTop ||
window.pageYOffset ||
window.scrollY ||
document.body.scrollTop
const delta = afterScrollTop - beforeScrollTop
if (delta === 0) return false
delta > 0
? el.classList.add('fixed')
: el.classList.remove('fixed')
setTimeout(() => {
beforeScrollTop = afterScrollTop
}, 0)
}, 200))
},
unbind() {
window.onscroll = null
}
}
可以看到主要逻辑是根据scrolltop前后变化值来改变导航栏样式,
把前后的scrolltop都打印出来,观察下过程值
console.log("after"+afterScrollTop)
console.log("before"+beforeScrollTop)
chrome中正常情况下,回弹不会改变scrolltop的值
而在safari中,拉至顶部scrolltop是会变负的ˊ_>ˋ
知道问题在哪,解决就很简单了,给两位朋友套个abs就好
safari坑之 回弹的更多相关文章
- safari坑之 video
博客地址: https://www.seyana.life/post/19 本来是打算给博客左上角的gif做个优化, 把gif换成webm,以video的形式自动播放,能从180k降到50k, 现在浏 ...
- flex定位下overflow失效的问题研究
概述 这是我在写移动端页面遇到的问题及解决方法,记录下来供以后开发时参考,相信对其他人也有用. 问题 之前写移动端页面,有一个顶条是导航条,需要固定在页面顶部,并且里面的元素需要可以左右滚动. 但是当 ...
- ios10 safari 的坑!
| 导语 ios10 的safari,又给前端开发者挖坑了..测试验证此问题只出现在ios10 safari中.想早点知道结论的,可以直接看最后一个结论~因为,解决过程不重要! 个人原创,未经允许,禁 ...
- 打开自定义链接新窗口(safari JS prompt的坑!)2016.03.08
很简单的一个小练习,但做的过程中发现safari的一个坑,使用prompt()方法的时候,点击取消和不输入一样,会返回空字符' ',而不是null! 要求: 制作新按钮,"新窗口打开网站&q ...
- 【safari挖的那些坑】iOS safari 浏览器 时间乱码(ios时间显示NaN) 问题解决
通常 iOS下时间错误表现形式 问题一: 这个界面运用了大量的日期类型的计算,当我们用JavaScript实例化一个日期对象时,我们可以这样用: var date =new Date(); 上面这段代 ...
- 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现
现在很多for Mobile的H5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要加一行css代码即可: -webkit-overflow-scrol ...
- 完美解决safari、微信浏览器下拉回弹效果。
完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } H ...
- 移动开发那些坑之——safari mobile click事件的冒泡bug
今天在iphone6 plus的safari上测试这么一段代码: <script> $(document).on('click','.callApp', function() { aler ...
- Safari中的new Date()格式化坑
今天在测试的时候发现,在Chrome中的如下代码: new Date("2014-03-09"); 在Safari中报错invalid date.经过查阅资料找到类似的问答: st ...
随机推荐
- Tript协议|伯尔尼公约|著作权|立法宗旨|自动保护|著作权集体管理|
知识产权 国际条约: Tript协议是国际性公约,<与贸易有关的知识产权协定>(英文:Agreement on Trade-Related Aspects of Intellectual ...
- id NSObject instanceType 区别
id 当不确定数组元素类型时,可以选择使用id NSObject和id都可以指向任何对象 NSObject使用时必须强转 instantceType 只能返回和方法所在类相同类型的对象 返回值类 ...
- Qt error C2338: No Q_OBJECT in the class with the signal错误解决办法(无法编译过信号与槽)
由于没有继承QObject类而引起的 只需继承QObject类即可 如果已经继承了QObject类,编译还出现错误 将QObject类放在最前面继承:public QObject 最后即可编译通过
- django操作非ORM创建的表
问题:django的ORM怎么连接已存在的表,然后进行增删查改操作? 工作中会遇见很多二次开发的时候,表都是已经创建好的,用django的ORM进行二次开发,怎么操作数据库中的表呢? 下面介绍 ...
- android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码
Android精选源码 android模仿支付宝app"记账本"模块源码 android一个超轻量级剪贴板历史记录管理软件源码 android模仿QQ拖动红点消失动画效果源码 展示 ...
- OpenCV Mat - 基本图像容器
Mat 在2001年刚刚出现的时候,OpenCV基于 C 语言接口而建.为了在内存(memory)中存放图像,当时采用名为 IplImage 的C语言结构体,时至今日这仍出现在大多数的旧版教程和教学材 ...
- Hexo快速搭建博客
1. 准备工作 ~ 安装node.js -> npm -> hexo-cli ~ 安装git -> 版本控制工具 2. 更换npm(nodejs package manager)源 ...
- springboot项目基础面试题
1.springboot与spring的区别. 引用自官方说法: java在集成spring等框架需要作出大量的配置,开发效率低,繁琐.所以官方提出 spring boot的核心思想:习惯优于配置.可 ...
- Mybatis-Generator相关配置demo
generatorConfig.xml配置信息 首先在resource中配置好datasource.propertise文件,包括数据库信息和mysql-connector的jar包位置. <? ...
- 吴裕雄--天生自然python编程:正则表达式
re.match函数 re.match 尝试从字符串的起始位置匹配一个模式,如果不是起始位置匹配成功的话,match()就返回none. 函数语法: re.match(pattern, string, ...