Question

The bounty expires in 7 days. Answers to this question are eligible for a +50 reputation bounty. David wants to draw more attention to this question.

%25

I m using framer-motion s layout property to handle this, and it works as expected unless the page has been scrolled, where framer seems to be ignoring the viewport scroll, and treating the element as if it is animating from its original position relative to the top of the page.

百分比25 规定:

Without scrolling, click on the first card. It will animate correctly.
Now go back, scroll to the bottom and click on the last card. This time, the card will animate up from below the screen, instead of from it s position within the viewport window.

Is there a way that I can either factor in the scroll distance, or that the element s position is calculated relative to the viewport and not the top of the page?

Example:

Answer 1

与此类似,由于你改变路线,新路线的浏览量较小。我不认为这是最佳办法,但我认为,我们只能挽救卡单上页的身高,然后把这一高度作为卡片详细页的最小高点,然后在排他性 an灭时,消除最小体高度:

首先,将<代码>与t;Link>的构成部分列入一个海关组成部分<代码><CardRedirector>:

          <CardRedirector>
            <Link href={`/${card.id}`} scroll={false}>
              <p>{card.title}</p>
              <Block id={card.id} />
            </Link>
          </CardRedirector>

在<代码><CardRedirector>中,我们可以添加<代码>用户<>>>,以便我们能够附上一个点击的听众,并添加一个点击听众,以挽救目前的身高,并把它作为最小的体高,这将在点击链接时发生:

"use client";

export const CardRedirector = ({ children }) => {
  const onCardClick = () => {
    const currentBodyHeight = document.body.scrollHeight;
    document.body.style.minHeight = `${currentBodyHeight}px`;
  };

  return <button onClick={onCardClick} style={{
    background:  none ,
    color:  inherit ,
    border:  none ,
    padding:  0 ,
    font:  inherit ,
    cursor:  pointer ,
    outline:  inherit ,
  }}>{children}</button>;
};

export default CardRedirector;

然后,在卡片详细页上,我们可以总结如下内容:<代码><Block>至<BlockContainer>构成部分,以便我们能够添加<条码>用户,并增列活动听众<条码>>onLayoutAnComplete。该活动会的听众将删除下列内容:

"use client";

import Block from "./block";

export const BlockContainer = ({ id }) => (
  <Block
    id={id}
    fixed="true"
    onLayoutAnimationComplete={() => {
      document.body.style.minHeight = "0";
    }}
  />
);

export default BlockContainer;

随后将卡片详细页改为:

export const BlogPostPage = async ({ params }) => {
  const id = Number(params.slug);

  if (!id) return notFound();

  return (
    <>
      <BlockContainer id={id} />
      <Link href="/" scroll={false}>
        Back
      </Link>
    </>
  );
};

沥滤沙箱:

%25

友情链接