Jump to content
GreenSock

Ryan Lee

Adding elements dynamically, ScrollSmoother doesn't work. [ 动态添加元素,ScrollSmoother无法正常工作 ]

Go to solution Solved by noviedo,

Recommended Posts

Posted (edited)


你好!

我在学习过程中看到了 ScrollSmoother,并且在官方示例中随意测试了插件。

当我在页面中异步添加dom的时候,页面正常显示新添加dom。

只有当浏览器调整大小的时候,在添加之前的dom会渲染。

我不知道这是一个问题,或者一些配置选项是可以处理这种情况的。


 

Hi!

I saw ScrollSmoother while I was learning, and randomly tested the plugin in the official example.

When I add DOM asynchronously to the page, the page displays the newly added DOM normally.

Only when the browser is resized, the dom before adding it will render.

I don't know if this is a problem, or if some configuration options are there to handle this.

 

[Google Translation]

 

See the Pen xxWbeRN by orochitian (@orochitian) on CodePen

Edited by akapowl
Added translation
Link to comment
Share on other sites

  • Solution

Hey @Ryan Lee, how's going? I just add a ResizeObserver in your code to listen to the ".viewport" size changes. Also, I wrapped the ScrollTrigger.refresh() into a delayedCall() just to simulate a debounce function.

 

const container = document.querySelector(".viewport");

const resizeObserver = new ResizeObserver((entries) => {
  gsap.delayedCall(0.2, () => {
    ScrollTrigger.refresh();
  });
});

resizeObserver.observe(container);


 

I don't know in which framework you are working, but please, don't remember to clean up the resizeObserver, just to keep clean the memory.

resizeObserver.disconnect()

I hope this helps you!.
 

See the Pen poLJvga by nazarenooviedo (@nazarenooviedo) on CodePen

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Posted (edited)


@noviedo 您好!

非常感谢您的耐心解答!

这确实解决了我遇到的问题。

我会继续学习您提供的API相关的知识。

很开心能得到解答,祝您生活愉快!


 

Hi @noviedo!

Thank you very much for your patience!

This did solve the problem I was having.

I will continue to learn about the API you provide.

I'm glad to get an answer, and I wish you a happy life!

[Google Translation]
 

Edited by akapowl
Added Translation
Link to comment
Share on other sites

  • akapowl changed the title to Adding elements dynamically, ScrollSmoother doesn't work. [ 动态添加元素,ScrollSmoother无法正常工作 ]

 

Hey @Ryan Lee

I added a google translation to your posts, as these forums try to keep things in English, so others who can not speak your language can benefit from this thread, too. If you can, please stick to English in future :) 

 

@noviedo' suggestion is great - but if you know exactly when you add new things to the DOM and it doesn't happen in dozens of different places in your code, a simple specific ScrollTrigger.refresh() after the new content was added would be enough - like at the end of your click event e.g.

 

Happy tweening!

 

  • Like 2
Link to comment
Share on other sites

Hey @akapowl

My English is very bad

In the future, I try to translate through translation software.

I'm just not sure whether the translated content can correctly express my meaning.

Anyway, thank you for your advice.

And thank you very much for your further answer and optimization of this question.

Have a good time!

( The above information comes from the translation software. I hope it correctly expresses my gratitude ) 😜

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×