Scrolltop动画无法在IOS上运行

Question

I have made a JS effect to increase the line-height of each li of my website while you scroll. 滚动时，我已经制作了一个JS效果来增加网站每个li的行高。 It is working nicely on my Macbook and my Android Smartphone but it doesn't on an iPhone. 它在我的Macbook和我的Android智能手机上运行良好，但它不适用于iPhone。 Does someone has a solution ? 有人有解决方案吗？

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

So when I take your example js and drop it on top of some random list elements, it works for me in iOS Safari just as well as it does in macOS Chrome. 因此，当我将您的示例js放在一些随机列表元素之上时，它在iOS Safari中适用于我，就像在macOS Chrome中一样。 But both are horribly chunky/janky because you're asking the browser to recalculate layout/flow in an almost recursive manner. 但两者都非常粗糙/笨拙，因为你要求浏览器以几乎递归的方式重新计算布局/流量。 When you update the line-height of a single li, you are reflowing the layout of all subsequent li elements. 当您更新单个li的行高时，您将回流所有后续li元素的布局。 This is really expensive/inefficient. 这真的很贵/效率很低。 Instead of updating layout/flow related properties you should find a way to create the desired effect with paint or better yet composite related properties. 您应该找到一种方法来使用paint或更好的复合相关属性来创建所需的效果，而不是更新布局/流相关属性。

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

If it were me, I'd try to find a way to use the transform property with unique translateY values for each li, after initially laying them out with a consistent line-height. 如果是我，我会尝试找到一种方法，在最初使用一致的线高度布局后，为每个li使用具有唯一translateY值的transform属性。 This also has the benefit of not altering the height of the whole list with every update, making it so the scrollHeight of the window isn't being recalculated mid scroll over and over again. 这样做的好处是不会在每次更新时改变整个列表的高度，这样就不会重新计算窗口的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