在React中处理滚动动画

12 浏览
0 Comments

在React中处理滚动动画

在React中处理滚动位置的正确方法是什么？我很喜欢平滑滚动，因为它能提供更好的用户体验。由于在React中操作DOM是一种反模式，我遇到了一个问题：如何平滑滚动到某个位置/元素？通常我会更改元素的scrollTop值，但这是对DOM的操作，是不允许的。\n如何以React的方式实现这一点？

0

3 答案

0 Comments

问题原因：上述代码在大多数浏览器中可以正常工作，但在Safari浏览器中无效。

解决方法：需要使用其他方法来解决在Safari中处理滚动动画的问题，主要是使用polyfill。

以下是使用polyfill解决这个问题的示例代码：

const smoothScroll = (target) => {
  const scrollContainer = document.querySelector('html,body');
  const targetPosition = target.getBoundingClientRect().top + scrollContainer.scrollTop;
  const startPosition = scrollContainer.scrollTop;
  const distance = targetPosition - startPosition;
  let startTime = null;
  const animation = (currentTime) => {
    if (startTime === null) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const ease = Math.easeInOutQuad(timeElapsed, startPosition, distance, 1000);
    scrollContainer.scrollTop = ease;
    if (timeElapsed < 1000) requestAnimationFrame(animation);
  };
  const Math.easeInOutQuad = (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(animation);
};
const scrollToTop = () => {
  const target = document.querySelector('#top');
  smoothScroll(target);
};

现在，我们可以使用scrollToTop函数来处理滚动动画，即使在Safari浏览器中也可以正常工作。

0
0 Comments

在React中处理滚动动画的问题出现的原因是浏览器的兼容性。为了解决这个问题，可以使用window.scroll({top: 0, left: 0, behavior: 'smooth' })语法来实现平滑滚动。但是需要注意浏览器的兼容性，可以通过访问caniuse.com来检查浏览器的兼容性，或者使用polyfill来解决兼容性问题。

为了完整起见，下面是如何使用webpack动态加载polyfill的方法：

if (!('scrollBehavior' in document.documentElement.style)) {
//safari does not support smooth scroll
  (async () => {
    const {default: smoothScroll} = await import(
      /* webpackChunkName: 'polyfill-modern' */
      'smoothscroll-polyfill'
      )
    smoothScroll.polyfill()
  })()
}

通过这种动态加载polyfill的方式，该包将通过ajax方式加载，除非浏览器支持平滑滚动。

polyfill-modern是一个任意的块名称，它提示webpack编译器将包合并在一起，以减少对服务器的请求次数。

如果您想通过“npm install”来解决问题，可以访问npmjs.com/package/smoothscroll-polyfill。

0
0 Comments

处理在React中的滚动动画的问题

在React中处理滚动动画的问题可能会遇到以下原因：

1. 使用scrollIntoView方法来滚动到指定位置，可以通过refs来实现。

2. 目前并不是所有浏览器都支持scrollIntoView方法的behavior参数，需要使用polyfill来实现平滑滚动。

解决方法如下：

1. 在要滚动到的元素上使用ref属性，并设置className为"scrollToHere"。

2. 创建一个按钮，并绑定scroll方法，通过传入ref来滚动到指定位置。

3. 在scroll方法中使用ref.current.scrollIntoView({behavior: 'smooth'})来实现平滑滚动。

4. 如果需要支持不支持scrollIntoView方法的浏览器，可以使用polyfill来实现平滑滚动。可以使用这个polyfill。

需要注意的是，目前scrollIntoView方法的平滑滚动选项仅在Chrome和Firefox浏览器中受支持。因此，如果需要在其他浏览器中使用该功能，需要使用polyfill。

以上方法是基于JavaScript的，与React无关。对于浏览器的支持情况和具体规范可以参考这里。

处理在React中的滚动动画问题的最佳解决方案是使用scrollIntoView方法，并配合使用polyfill来实现平滑滚动。当所有浏览器都支持该方法时，可以简单地移除polyfill即可。

0