Scrolltop动画无法在IOS上运行

Question

滚动时，我已经制作了一个JS效果来增加网站每个li的行高。 它在我的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";
        });
      } 
    }
  }));

Answer 1

因此，当我将您的示例js放在一些随机列表元素之上时，它在iOS Safari中适用于我，就像在macOS Chrome中一样。 但两者都非常粗糙/笨拙，因为你要求浏览器以几乎递归的方式重新计算布局/流量。 当您更新单个li的行高时，您将回流所有后续li元素的布局。 这真的很贵/效率很低。 您应该找到一种方法来使用paint或更好的复合相关属性来创建所需的效果，而不是更新布局/流相关属性。

https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

如果是我，我会尝试找到一种方法，在最初使用一致的线高度布局后，为每个li使用具有唯一translateY值的transform属性。 这样做的好处是不会在每次更新时改变整个列表的高度，这样就不会重新计算窗口的scrollHeight，一次又一次地滚动。

 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>

Scrolltop动画无法在IOS上运行

问题描述

1 个解决方案

解决方案1
0 2019-06-24 05:50:27

Scrolltop动画无法在IOS上运行

问题描述

1 个解决方案

解决方案1 0 2019-06-24 05:50:27

解决方案1
0 2019-06-24 05:50:27