博客地址: 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坑之 回弹的更多相关文章

  1. safari坑之 video

    博客地址: https://www.seyana.life/post/19 本来是打算给博客左上角的gif做个优化, 把gif换成webm,以video的形式自动播放,能从180k降到50k, 现在浏 ...

  2. flex定位下overflow失效的问题研究

    概述 这是我在写移动端页面遇到的问题及解决方法,记录下来供以后开发时参考,相信对其他人也有用. 问题 之前写移动端页面,有一个顶条是导航条,需要固定在页面顶部,并且里面的元素需要可以左右滚动. 但是当 ...

  3. ios10 safari 的坑!

    | 导语 ios10 的safari,又给前端开发者挖坑了..测试验证此问题只出现在ios10 safari中.想早点知道结论的,可以直接看最后一个结论~因为,解决过程不重要! 个人原创,未经允许,禁 ...

  4. 打开自定义链接新窗口(safari JS prompt的坑!)2016.03.08

    很简单的一个小练习,但做的过程中发现safari的一个坑,使用prompt()方法的时候,点击取消和不输入一样,会返回空字符' ',而不是null! 要求: 制作新按钮,"新窗口打开网站&q ...

  5. 【safari挖的那些坑】iOS safari 浏览器 时间乱码(ios时间显示NaN) 问题解决

    通常 iOS下时间错误表现形式 问题一: 这个界面运用了大量的日期类型的计算,当我们用JavaScript实例化一个日期对象时,我们可以这样用: var date =new Date(); 上面这段代 ...

  6. 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现

    现在很多for Mobile的H5网页内都有快速滚动和回弹的效果,看上去和原生app的效率都有得一拼. 要实现这个效果很简单,只需要加一行css代码即可: -webkit-overflow-scrol ...

  7. 完美解决safari、微信浏览器下拉回弹效果。

    完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } H ...

  8. 移动开发那些坑之——safari mobile click事件的冒泡bug

    今天在iphone6 plus的safari上测试这么一段代码: <script> $(document).on('click','.callApp', function() { aler ...

  9. Safari中的new Date()格式化坑

    今天在测试的时候发现,在Chrome中的如下代码: new Date("2014-03-09"); 在Safari中报错invalid date.经过查阅资料找到类似的问答: st ...

随机推荐

  1. windows下面apache配置虚拟目录(测试使用,发布网站不建议目录访问)

    windows下面是这样简单设置 1 Apache虚拟目录: 针对某一目录可以这么设置: Alias /aidd2008 "D:/php/web/aidd2008" <Dir ...

  2. CSS-----样式表案例(沃顿商学院)之高级山寨版

    HTML-CSS设计----------沃顿商学院(高级山寨版) 1.html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  3. 3dmax2016卸载/安装失败/如何彻底卸载清除干净3dmax2016注册表和文件的方法

    3dmax2016提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2016失败提示3dmax2016安装未完成,某些产品无法安装,也有时候想重新安装3 ...

  4. [LC] 129. Sum Root to Leaf Numbers

    Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number ...

  5. hadoop报错:could only be replicated to 0 nodes, instead of 1

    错误 [root@hadoop test]# hadoop jar hadoop.jarcom.hadoop.hdfs.CopyToHDFS 14/01/26 10:20:00 WARN hdfs.D ...

  6. linux下的时区修改

    Centos 7时区问题: 通常使用tzselect命令选择时区,今天在修改centos7的时区的时候,修改完以后时区还是没有发生变化,重启也是没有用的:通过网络的帮助了解到,在Centos和ubun ...

  7. 微信小游戏排行榜页滚动查看排行榜(canvas指定区域溢出滚动,懒渲染)

    在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系数 ...

  8. 2018湖南省赛B题“2018”

    题面懒得敲了,反正看这篇博客的肯定知道题面. 比赛时想按约数的一些性质分情况讨论出公式然后在合并,结果单考虑矩阵里出现2018和1009(与2互质,1009出现次数等于2)出现的情况就写了一长串公式, ...

  9. SQLite数据库迁移MySQL(MariaDB)完整步骤

    第一步(SQLite导出数据库): 命令方式导出数据库 > .output d:/data/lagou.sql //导出路径及文件名 > .dump //开始导出 修改lagou.sql文 ...

  10. Dockerfile创建zabbix监控体系

    使用for循环将zabbix的镜像导入到容器中 for n in `ls *.tar.gz`;do docker load -i $n ;done 使用docker运行zabbix-server do ...