博客地址: 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. day19-3个双下item方法

    #使用双下item方法来实现属性的增删改查: # 查:__getitem__ 增改:__setitem__ 删除: __delitem__ class Goods: def __init__(self ...

  2. day04-函数,装饰器初成

    面试的时候,经常被问过装饰器,所以掌握好装饰器非常重要. 一.装饰器形成的过程:1.最简单的装饰器.2.被装饰的函数有返回值.3.被装饰的函数有一个参数.4.被装饰的函数有多个位置参数.5.被装饰的函 ...

  3. Excel-DNA自定义函数的参数智能提示功能:ExcelDna.IntelliSense1.1.0.rar

    解压缩后,可以看到如下3个文件. ExcelDna.IntelliSense.xll 以及 ExcelDna.IntelliSense64.xll 是两个函数参数智能提示加载项,分别用于32和64位E ...

  4. ROS中的日志(log)消息

    学会使用日志(log)系统,做ROS大型项目的主治医生 通过显示进程的运行状态是好的习惯,但需要确定这样做不会影响到软件的运行效率和输出的清晰度.ROS 日志 (log) 系统的功能就是让进程生成一些 ...

  5. 奇点云 x 阿里云 | 联合发布综合体数字化转型与数据创新解决方案

    2019年7月25日下午,在阿里云峰会上海站,奇点云入选阿里云首批联合解决方案合作伙伴,并联合发布了“综合体数字化转型与数据创新解决方案”,共同探索综合体的智能服务. 关于综合体的数字化转型,奇点云联 ...

  6. 一次完整的HTTP请求响应过程(很详细)

    一. HTTP请求和响应步骤   图片来自:理解Http请求与响应 以上完整表示了HTTP请求和响应的7个步骤,下面从TCP/IP协议模型的角度来理解HTTP请求和响应如何传递的. 二.TCP/IP协 ...

  7. lua https request 调用

    网上资料 引用ssl.https 包 local https = require("ssl.https") 之后按同http一样调用. 但是,这种只最基本的实现了访问https服务 ...

  8. python3下应用requests

    模拟浏览器请求有两种,一种是不需要用户登录或者验证的请求,一种是需要用户登录或者验证的请求 那么我们先来说说不需要用户登录的方法 这种方式直接可以获取源码,用get的请求方式 登录的方式 获取这种页面 ...

  9. MySQL第五次课

    /*Mysql第五次课 索引与事务 数据库优化 数据库优化指的就是通过各种途径 提高查询效率 优化方式有多种,但其中之一就是为字段 添加索引 什么是索引? 相当于为某个字段或某几个字段,添加 了目录, ...

  10. Linux Ubuntu 常见的压缩命令

    小知识: Linux上常见的压缩命令就是gzip与bzip2,compress已经不再流行.gzip是有GNU计划所开发出来的压缩命令,该命令已经替换了compress命令.后来GNU又开发出bzip ...