Ryan Lee Posted July 1, 2022 Share Posted July 1, 2022 (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 July 2, 2022 by akapowl Added translation Link to comment Share on other sites More sharing options...
Solution noviedo Posted July 1, 2022 Solution Share Posted July 1, 2022 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 2 1 Link to comment Share on other sites More sharing options...
Ryan Lee Posted July 2, 2022 Author Share Posted July 2, 2022 (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 July 2, 2022 by akapowl Added Translation Link to comment Share on other sites More sharing options...
akapowl Posted July 2, 2022 Share Posted July 2, 2022 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! 2 Link to comment Share on other sites More sharing options...
Ryan Lee Posted July 3, 2022 Author Share Posted July 3, 2022 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 ) 😜 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now