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