Scroll function with rails Stimulus.js get error in other page-CodePudding

I using rails7 and Stimulus.js to Scroll event. this code can effect well in target page. But when I move other page. Unexpectedly effect this code and get error. Dose someone could helping me?

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
    connect() {
        window.addEventListener("scroll", function() {
            const targetTitle = document.getElementById( "target_title" );
            const clientHeight = targetTitle.getBoundingClientRect().top;

            if (-100 > clientHeight) {
                document.getElementById('scroll_header').classList.add('!block')
            } else {
                document.getElementById('scroll_header').classList.remove('!block')
            }
        });
    }
}

CodePudding user response：

From what you describe, I suppose you're using turbo as well. If so, then pages are not loaded the usual way, only the body part of the current html page is replaced, and because of that, any event listener previously added will stay active.

When you add an EventListener to an element, you should also remove it when/if it's no longer needed, using removeEventListener. Stimulus makes this simple by calling the disconnect function of your controller when the element the controller is bound to is removed from the page (see https://stimulus.hotwired.dev/reference/lifecycle-callbacks#disconnection)

So changing your controller as follows should do the trick (I did not test this code, there may be typos and other errors in it, but it gives you pointers to the soluton).

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
    handleScroll(_event) {
        const targetTitle = document.getElementById( "target_title" );
        const clientHeight = targetTitle.getBoundingClientRect().top;

        if (-100 > clientHeight) {
            document.getElementById('scroll_header').classList.add('!block')
        } else {
            document.getElementById('scroll_header').classList.remove('!block')
        }
    }

    connect() {
        window.addEventListener("scroll", this.handleScroll)
    }
    
    disconnect() {
        window.removeEventListener("scroll", this.handleScroll);
    }
}