reload or refresh scrollTrigger smooth scroll when resize window

[Merkif]

Hi how can I reload or update the scrollTrigger flattens the scroll height on resize, there is a large white space on the page in my horizontal scroll section without reloading, how can I fix this?
if the window size is <1200px I use the browser's native scrolling.

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.matchMedia({
	// desktop
	"(min-width: 1200px)": function() {
    smoothScroll("#content");
    function smoothScroll(content, viewport, smoothness) {
      content = gsap.utils.toArray(content)[0];
      smoothness = smoothness || 1;
    
      gsap.set(viewport || content.parentNode, {
        overflow: "hidden",
        position: "fixed",
        height: "100%",
        width: "100%",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
      });
      gsap.set(content, {
        overflow: "visible",
        width: "100%"
      });
    
      let getProp = gsap.getProperty(content),
        setProp = gsap.quickSetter(content, "y", "px"),
        setScroll = ScrollTrigger.getScrollFunc(window),
        removeScroll = () => content.style.overflow = "visible",
        killScrub = trigger => {
          let scrub = trigger.getTween ? trigger.getTween() : gsap.getTweensOf(trigger.animation)[0];
          scrub && scrub.kill();
          trigger.animation.progress(trigger.progress);
        },
        height, isProxyScrolling;
    
      function refreshHeight() {
        height = content.clientHeight;
        content.style.overflow = "visible"
        document.body.style.height = height + "px";
        return height - document.documentElement.clientHeight;
      }
    
      ScrollTrigger.addEventListener("refresh", () => {
        removeScroll();
        requestAnimationFrame(removeScroll);
      })
      ScrollTrigger.defaults({
        scroller: content
      });
      ScrollTrigger.prototype.update = p => p;
    
      ScrollTrigger.scrollerProxy(content, {
        scrollTop(value) {
          if (arguments.length) {
            isProxyScrolling = true;
            setProp(-value);
            setScroll(value);
            return;
          }
          return -getProp("y");
        },
        getBoundingClientRect() {
          return {
            top: 0,
            left: 0,
            width: window.innerWidth,
            height: window.innerHeight
          };
        }
      });
    
      return ScrollTrigger.create({
        animation: gsap.fromTo(content, {
          y: 0
        }, {
          y: () => document.documentElement.clientHeight - height,
          ease: "none",
          onUpdate: ScrollTrigger.update
        }),
        scroller: window,
        invalidateOnRefresh: true,
        start: 0,
        end: refreshHeight,
        refreshPriority: -999,
        scrub: smoothness,
        onUpdate: self => {
          if (isProxyScrolling) {
            killScrub(self);
            isProxyScrolling = false;
          }
        },
        onRefresh: killScrub
      });
    }
    gsap.to(".advantage", {
      x: () =>
        -(document.querySelector('.advantage').scrollWidth - document.documentElement.clientWidth) +
        "px",
      ease: "none",
      scrollTrigger: {
        scrub: true,
        invalidateOnRefresh: true,
        invalidateOnResize: true,
        trigger: "#principles",
        pin: true,
        start: "top top",
        end: () => "+=" + document.querySelector('.advantage').offsetWidth
      },
    });
  
    gsap.to(".products--home", {
      x: () =>
        -(document.querySelector('.products--home').scrollWidth - document.documentElement.clientWidth) +
        "px",
      ease: "none",
      scrollTrigger: {
        scrub: true,
        invalidateOnRefresh: true,
        invalidateOnResize: true,
        trigger: "#products",
        pin: true,
        start: "top top",
        end: () => "+=" + document.querySelector('.products--home').offsetWidth
      },
    });
    gsap.to(".articles--home", {
      x: () =>
        -(document.querySelector('.articles--home').scrollWidth - document.documentElement.clientWidth) +
        "px",
      ease: "none",
      scrollTrigger: {
        scrub: true,
        invalidateOnRefresh: true,
        invalidateOnResize: true,
        trigger: "#article",
        pin: true,
        start: "top top",
        end: () => "+=" + document.querySelector('.articles--home').scrollWidth
      },
    });
  }, 
});

 

[GreenSock]

Hi @Merkif. First of all, please only post in English here. I translated your post for convenience. 

 

If you'd like some help, please provide a minimal demo with only the essential code for recreating the specific problem you're struggling with and we'd be happy to answer any GSAP-specific questions.