javascript:window.scroll()函数behavior属性smooth属性值在iphone浏览器上不兼容

在制作静态页面的时候,使用window.scroll()来实现点击爬楼的事件,一开始是这样写的
let height = 500 //需要跳转到的高度
this.window.scroll({
“top”:height,
“behavior”:“smooth”
})
在安卓手机的浏览器上是可以实现的,但是一用苹果浏览器打开,当我点击触发事件时, “behavior”:"smooth"并没有起作用,网上查了下发现苹果浏览器不兼容这个属性。只能再想办法了。

解决方法

网上也查到了在VUE项目上的解决方法
链接: https://blog.csdn.net/qq_33505829/article/details/105442185

但是!!!!!!!
我做的只是个静态页面,并没有使用VUE项目架构,所以只能找js组件了

由于引入了Vue.js,于是先搞了几个网上找到的方法
// 获取当前滚动条高度
getScrollTop() {
let scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
//获取滚动条总高度
getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}

然后就是最重要的组件

Math.easeInOutQuad = function(t, b, c, d) {
t /= d / 2
if (t < 1) {
return c / 2 * t * t + b
}
t–
return -c / 2 * (t * (t - 2) - 1) + b
}

// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
const requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
})()

// because it’s so fucking difficult to detect the scrolling element, just move them all
function move(amount) {
document.documentElement.scrollTop = amount
document.body.parentNode.scrollTop = amount
document.body.scrollTop = amount
}

function position() {
return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
}

function scrollToApi(to, duration, callback) {
const start = position()
const change = to - start
const increment = 20
let currentTime = 0
duration = typeof duration === ‘undefined’ ? 500 : duration
const animateScroll = function() {
// increment the time
currentTime += increment
// find the value with the quadratic in-out easing function
const val = Math.easeInOutQuad(currentTime, start, change, duration)
// move the document.body
move(val)
// do the animation unless its over
if (currentTime < duration) {
requestAnimFrame(animateScroll)
} else {
if (callback && typeof callback === ‘function’) {
// the animation is done so lets callback
callback()
}
}
}
animateScroll()
}

外部调用scrollToApi(to, duration, callback)
//to 目的高度
//duration 过程时间
//callback 回调函数

计算好你需要去的高度,然后直接调用完事!

javascript:window.scroll()函数behavior属性smooth属性值在iphone浏览器上不兼容相关推荐

  1. JavaScript中实现函数重载和参数默认值

    2019独角兽企业重金招聘Python工程师标准>>> 参数默认值是指在调用函数时,若省略了某个实参,函数会自动为该参数分配一个默认值,使得函数调用的方便性和灵活性大大提高. 举个例 ...

  2. Javascript 之《函数传参到底是值传递还是引用传递》

    前言 这个问题其实困惑了我好久,但是在实际使用中总是得过且过,不想去深究.由于这种态度,在学习 Javascript 过程中,水平一直都是出于半桶水状态,很多概念和原理似懂非懂,模糊不清. 所以,写了 ...

  3. vue data属性中的值绑定到dom上的一些问题

    1.html属性绑定既有字符串又有变量的写法 <a :href="`tel:${item.mobile}`"><img class="phone-ico ...

  4. javascript window 属性和方法。

    closed 获取引用窗口是否已关闭. defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息. dialogArguments 设置或获取传递给模式对话框窗口的变量或变量数组. ...

  5. JavaScript window.document的属性、方法和事件小结

    javascript中window.document的属性.方法和事件的总结,有需要的朋友可参考一下本文章. 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的 ...

  6. JavaScript中函数里的arguments属性

    <!DOCTYPE html> <html lang="en">     <head>         <meta charset=&qu ...

  7. JavaScript面向对象:类、方法、属性

    JavaScript是一种基于对象的语言,与传统面向对象语言(C#.C++)相比,JavaScript中没有类的概念,其继承有两种基本形式:基于对象的继承和基于类型的继承(原型链继承).无论哪种形式的 ...

  8. JavaScript高级day02-PM【原型链的属性问题、探索instanceof、原型面试题】

    笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目录 P19 19.尚硅谷_JS高级_原型链_属性问题 11:53 P20 20.尚硅谷_J ...

  9. JavaScript中的对象学习笔记(属性操作)

    本文是笔者学习JavaScript时做的笔记,大部分内容来自<JavaScript权威指南>,记录学习中的重点,并引入一些其他博文和与其他程序员讨论的内容,供本人日常翻阅.如有疑问,请留言 ...

最新文章

  1. SAP MM 采购附加费计入物料成本?
  2. 周立功CAN二次开发接口使用(C#)
  3. 音视频技术开发周刊 | 155
  4. HDU 2647 Reward (拓扑排序)
  5. sudo apt-get update
  6. 又不能起床python好学吗
  7. Jeecg-Boot 2.1.4 版本发布,基于SpringBoot低代码平台
  8. 解决RabbitMQ service is already present - only up...
  9. 通过this()调用有参构造方法
  10. ASP.NET里的路径的使用-预备篇
  11. Java学习笔记:2021年12月31日下午-2022年1月1日上午
  12. 概率分布-beta分布
  13. 巴菲特佛罗里达州立大学演讲
  14. 如何正确地在Spring Data JPA和Jackson中用上Java 8的时间相关API(即JSR 310也即java.time包下的众神器)...
  15. Git使用技巧--详细教程
  16. 练习-Java循环综合练习一之住房贷款还款计算
  17. 今天杂志今天杂志社今天编辑部2022年第6期目录
  18. Python中利用Opencv进行车牌号检测
  19. 丢手帕程序C语言,约瑟夫问题,即丢手帕游戏
  20. 计算机通信与网络安全国际会议,第一届计算机通信与网络安全国际学术会议(CCNS2020)...

热门文章

  1. C++ 函数反汇编跟踪以及栈结构分析
  2. Android移动开发:第二章按钮(2)
  3. 单片机开发教程4——多文件编程
  4. DVWA靶场通关(SQL注入)
  5. oracle序列号、
  6. WebView深究之Android是如何实现webview初始化的
  7. 计算机睡眠状态能挂游戏,台式电脑怎么设置WIN7睡眠状态下不断网我要挂游戏。...
  8. python 创建和使用字典
  9. 小白深度学习入坑指南
  10. win7无法安装gpt、mbr问题