我制作了一个 JS 效果，可以在滚动时增加网站每个里的行高。它在我的 Macbook 和 Android 智能手机上运行良好，但在 iPhone 上却无法运行。有人有解决办法吗？
function throttled(delay, fn) {
let lastCall = 0;
return function(...args) {
const now = (new Date).getTime();
if (now - lastCall < delay) {
return;
}
lastCall = now;
return fn(...args);
}
}
const testElement = document.querySelectorAll("li");
console.log(testElement.offsetTop);
window.addEventListener("scroll", throttled(10, (e) => {
for(let i = testElement.length-1;i>=0;i--){
let posTopElement = (testElement[i].offsetTop)-600;
if (document.documentElement.scrollTop > posTopElement) {
window.requestAnimationFrame(function() {
let minLineHeight = 4;
let lineHeight = (window.scrollY - posTopElement) * 0.1;
if (lineHeight < minLineHeight) lineHeight = minLineHeight;
else if (lineHeight > 36) lineHeight = 36;
testElement[i].style.lineHeight = lineHeight + "px";
});
}
}
}));
最佳答案
因此，当我将您的示例 js 放在一些随机列表元素的顶部时，它在 iOS Safari 中的工作方式与在 macOS Chrome 中的工作方式一样。但两者都非常笨重/简陋，因为您要求浏览器以几乎递归的方式重新计算布局/流程。当您更新单个 li 的行高时，您正在重排所有后续 li 元素的布局。这确实很昂贵/效率低下。您应该找到一种方法来使用绘制或更好的复合相关属性来创建所需的效果，而不是更新布局/流程相关属性。
https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
如果是我，我会尝试找到一种方法，在最初使用一致的行高。这还有一个好处，就是每次更新时都不会改变整个列表的高度，这样窗口的滚动高度就不会在滚动过程中一次又一次地重新计算。
function throttled(delay, fn) {
let lastCall = 0;
return function(...args) {
const now = (new Date).getTime();
if (now - lastCall < delay) {
return;
}
lastCall = now;
return fn(...args);
}
}
const testElement = document.querySelectorAll("li");
console.log(testElement.offsetTop);
window.addEventListener("scroll", throttled(10, (e) => {
for(let i = testElement.length-1;i>=0;i--){
let posTopElement = (testElement[i].offsetTop)-600;
if (document.documentElement.scrollTop > posTopElement) {
window.requestAnimationFrame(function() {
let minLineHeight = 4;
let lineHeight = (window.scrollY - posTopElement) * 0.1;
if (lineHeight < minLineHeight) lineHeight = minLineHeight;
else if (lineHeight > 36) lineHeight = 36;
testElement[i].style.lineHeight = lineHeight + "px";
});
}
}
}));<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
<style>
ul {
min-height: 200vh;
overflow: hidden;
}
</style>
</head>
<body>
<ul>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
<li>hello world</li>
</ul>
</body>
</html>关于javascript - 滚动顶部动画在 IOS 上不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56394821/