javascript:window.scroll()函数behavior属性smooth属性值在iphone浏览器上不兼容
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浏览器上不兼容相关推荐
- JavaScript中实现函数重载和参数默认值
2019独角兽企业重金招聘Python工程师标准>>> 参数默认值是指在调用函数时,若省略了某个实参,函数会自动为该参数分配一个默认值,使得函数调用的方便性和灵活性大大提高. 举个例 ...
- Javascript 之《函数传参到底是值传递还是引用传递》
前言 这个问题其实困惑了我好久,但是在实际使用中总是得过且过,不想去深究.由于这种态度,在学习 Javascript 过程中,水平一直都是出于半桶水状态,很多概念和原理似懂非懂,模糊不清. 所以,写了 ...
- vue data属性中的值绑定到dom上的一些问题
1.html属性绑定既有字符串又有变量的写法 <a :href="`tel:${item.mobile}`"><img class="phone-ico ...
- javascript window 属性和方法。
closed 获取引用窗口是否已关闭. defaultStatus 设置或获取要在窗口底部的状态栏上显示的缺省信息. dialogArguments 设置或获取传递给模式对话框窗口的变量或变量数组. ...
- JavaScript window.document的属性、方法和事件小结
javascript中window.document的属性.方法和事件的总结,有需要的朋友可参考一下本文章. 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的 ...
- JavaScript中函数里的arguments属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- JavaScript面向对象:类、方法、属性
JavaScript是一种基于对象的语言,与传统面向对象语言(C#.C++)相比,JavaScript中没有类的概念,其继承有两种基本形式:基于对象的继承和基于类型的继承(原型链继承).无论哪种形式的 ...
- JavaScript高级day02-PM【原型链的属性问题、探索instanceof、原型面试题】
笔记.视频.源码:JavaScript(基础.高级)笔记汇总表[尚硅谷JavaScript全套教程完整版] 目录 P19 19.尚硅谷_JS高级_原型链_属性问题 11:53 P20 20.尚硅谷_J ...
- JavaScript中的对象学习笔记(属性操作)
本文是笔者学习JavaScript时做的笔记,大部分内容来自<JavaScript权威指南>,记录学习中的重点,并引入一些其他博文和与其他程序员讨论的内容,供本人日常翻阅.如有疑问,请留言 ...
最新文章
- SAP MM 采购附加费计入物料成本?
- 周立功CAN二次开发接口使用(C#)
- 音视频技术开发周刊 | 155
- HDU 2647 Reward (拓扑排序)
- sudo apt-get update
- 又不能起床python好学吗
- Jeecg-Boot 2.1.4 版本发布,基于SpringBoot低代码平台
- 解决RabbitMQ service is already present - only up...
- 通过this()调用有参构造方法
- ASP.NET里的路径的使用-预备篇
- Java学习笔记:2021年12月31日下午-2022年1月1日上午
- 概率分布-beta分布
- 巴菲特佛罗里达州立大学演讲
- 如何正确地在Spring Data JPA和Jackson中用上Java 8的时间相关API(即JSR 310也即java.time包下的众神器)...
- Git使用技巧--详细教程
- 练习-Java循环综合练习一之住房贷款还款计算
- 今天杂志今天杂志社今天编辑部2022年第6期目录
- Python中利用Opencv进行车牌号检测
- 丢手帕程序C语言,约瑟夫问题,即丢手帕游戏
- 计算机通信与网络安全国际会议,第一届计算机通信与网络安全国际学术会议(CCNS2020)...