8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何修复页面首次渲染后的平滑滚动行为错误?

Jamie Nicholl-Shelley 1月前

24 0

在页面加载完毕或者用户更新页面、超链接或者其他任何可以链接的标签之后,网站将无法平滑地滚动到所需的位置(低于需要的位置)。那么该如何做呢?

在页面加载完毕或用户更新页面、超链接或任何其他能够链接的标签后,网站将无法平滑地滚动到所需位置(低于需要)。

那么我该如何解决这个问题,以便即使在渲染页面之后一切仍能正常运行?

"use client";

import React from "react";
import { Link } from "react-scroll";

interface ButtonNavigationProps {
  navigateTo: string;
  children: React.ReactNode;
}

const ButtonNavigation: React.FC<ButtonNavigationProps> = ({
  navigateTo,
  children,
}) => {
  return (
    <Link
      smooth={true}
      spy={true}
      isDynamic={true}
      to={navigateTo}
      offset={-130}
      duration={650}
      className="flex items-center gap-x-2 px-8 py-3"
    >
      {children}
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="24"
        viewBox="0 -960 960 960"
        width="24"
        fill="currentColor"
      >
        <path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z" />
      </svg>
    </Link>
  );
};

export default ButtonNavigation;

目前,有两种情况不会发生此类滚动错误:

  1. 只有在用户独立滚动浏览网站或第二次使用链接导航(第一次导航没有滚动到页面上的正确位置)后,所有导航才能正常工作。

2)如果链接没有流畅的行为,那么从第一页渲染开始一切都会正常工作,但由于我关心流畅的行为,我找不到任何其他选项来替代它。

我知道这不是正常现象,很可能是平滑滚动错误。我还检查了页面是否已完全加载,以便我可以滚动 - 但没用。请帮助我,因为我需要尽快解决这个问题。提前谢谢!

帖子版权声明 1、本帖标题:如何修复页面首次渲染后的平滑滚动行为错误?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Jamie Nicholl-Shelley在本站《typescript》版块原创发布, 转载请注明出处!
最新回复 (0)
  • "use client";
    
    import React, { useState, useEffect } from "react";
    import { Link } from "react-scroll";
    
    interface ButtonNavigationProps {
      navigateTo: string;
      children: React.ReactNode;
    }
    
    const ButtonNavigation: React.FC<ButtonNavigationProps> = ({
      navigateTo,
      children,
    }) => {
      // State to track whether the page is fully loaded
      const [isLoaded, setIsLoaded] = useState(false);
    
      useEffect(() => {
        // Function to set the state when the page is fully loaded
        const handleLoad = () => {
          setIsLoaded(true);
        };
    
        // Check if the page has already loaded
        if (document.readyState === "complete") {
          setIsLoaded(true); // Set to true immediately if the page is fully loaded
        } else {
          // If the page is not yet loaded, add an event listener to trigger once it finishes loading
          window.addEventListener("load", handleLoad);
        }
    
        // Cleanup event listener when the component unmounts
        return () => {
          window.removeEventListener("load", handleLoad);
        };
      }, []); // Empty dependency array means this runs once when the component mounts
    
      return (
        <Link
          smooth={true}
          spy={true}
          isDynamic={true}
          to={navigateTo}
          offset={-130}
          duration={650}
          className="flex items-center gap-x-2 px-8 py-3"
          isDisabled={!isLoaded} // Disable smooth scrolling until the page is fully loaded
        >
          {children}
          <svg
            xmlns="http://www.w3.org/2000/svg"
            height="24"
            viewBox="0 -960 960 960"
            width="24"
            fill="currentColor"
          >
            <path d="m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z" />
          </svg>
        </Link>
      );
    };
    
    export default ButtonNavigation;
    
返回
作者最近主题: