博客地址: 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. 用logstash 作数据的聚合统计

    用logstash 作数据的聚合统计 以spark-streaming 处理消费数据,统计日志经spark sql存储在mysql中 日志写入方式为append val wordsDataFrame ...

  2. activity 和 fragment 传递信息

    acitvity 传递信息到fragment 初始化fragment 时可以传递arguments  该参数类型时Bundle activity 会持有fragment引用  通过通过参数的set方法 ...

  3. Lua-文件操作

    简单模式和完全模式 简单模式(simple model)拥有一个当前输入文件和一个当前输出文件,并且提供针对这些文件相关的操作. 完全模式(complete model) 使用外部的文件句柄来实现.它 ...

  4. peculiar|retreated|civilize|conceivable

    ADJ-GRADED 奇怪的:古怪的:不寻常的If you describe someone or something as peculiar, you think that they are str ...

  5. 使用JavaScript获取前一周的日期

    在开发当中遇到了一个关于echarts初始展示当前前7天的数据,正好记录一下如何获取前"n"天的日期, 返回时间格式:2020-02-02 // 返回前number天的日期格式为2 ...

  6. IPFS问题总结

    1.安装包下载 ipfs安装版本下载:https://github.com/ipfs/go-ipfs/releases,这是IPFS的go语言实现版,目前实现的还有js版本. 2.安装与启动 linu ...

  7. JS数组去重算法

    思路: 1.创建一个新的数组存放结果 2.创建一个空对象 3.for循环时,每次取出一个元素与对象进行对比,如果这个元素不重复,则把它存放到结果数组中,同时把这个元素的内容作为对象的一个属性,并赋值为 ...

  8. 20181026_队测_Brick Game

    题目描述 给出一个\(n\)行\(m\)列的矩阵,矩阵中每个格子有一个非负整数,现在要求你去除其中的个格子,使得剩下的格子中的数的总和最大.另外,去除\(k\)个格子后,剩下的格子必须满足以下几个性质 ...

  9. 是谁收购了被谷歌私藏7年之久的Zagat?

    国内餐饮行业的风口似乎总是执着于"价格"上,无论是天天搞特价的外卖,还是优惠不停歇的团购网站,都将"价格"当做了竞争的杀手锏.即使是网红奶茶.甜品之类的,也是将 ...

  10. 日志框架之2 slf4j+logback实现日志架构 · 远观钱途

    如何从缤纷复杂的日志系统世界筛选出适合自己的日志框架以及slf4j+logback的组合美妙之处?此文可能有帮助 logback介绍 Logback是由log4j创始人设计的另一个开源日志组件,官方网 ...