Как запретить кнопке навигации запускать `windows .onscroll`

Question

Я работаю над веб-сайтом, на котором есть три способа навигации по странице. Вы можете просто использовать колесо прокрутки, как обычно, вы можете нажимать кнопки навигации вверху, и есть небольшой пузырьковый навигатор, который вы можете нажимать для навигации, но также автоматически обновляет заполненный пузырь при прокрутке.

I have it so that when the page is scrolled, it runs the set_nav_on_scroll function. I also have in the nav_click function a command to animate the scroll Top to the selected section when either the bubble navigator was pressed or the text button at the top was pressed.

I was having an issue when I clicked the button, it would scroll (all as expected), then it would trigger the window.onscroll, which I don't want. My solution to this issue was to add if(!$(this).is('animated')) flow = true as suggested здесь . В основном это работает, но затем случайным образом он изменится с flow на true прямо перед концом анимации, что приведет к повторному срабатыванию windows.onscroll.

Я пытался исправить эта проблема в течение последних 2 дней, и я не знаю, где я ошибаюсь.

Я хотел включить только потенциально важные части моего кода, но все это вроде работает вместе.

nav_setup. js

window.onscroll = function() { set_nav_on_scroll() }

function add_all_nav_items() {
    $('.section[name]').each(function (index, element) {
        let name = $(element)[0].attributes.name.value
        add_nav_item(name)
    })
}

function add_nav_item(name, active=false) {
    let text = name.replace(/_/g, ' ')
    let nav_el = `<a href="#${name}" data-name="${name}" class="nav-btn" onclick=nav_click("${name}")>${text}</a>`
    let bub_el = `<a href="#${name}" data-name="${name}" class="bub-btn" onclick=nav_click("${name}")></a>`
    $('#navigator').append(nav_el)
    $('#bubbles').append(bub_el)
    if (active) nav_click(name)
}

$(".nav-btn").click(function (event) {
    console.log(event)
})
let flow = true
function nav_click(name, move=true) {
    let hash = window.location.hash.substr(1)
    if (hash !== name) {
        window.location.hash = name
        if (move) {
            let section_top = $(`.section[name=${name}]`)[0].offsetTop
            let offset = window.innerHeight * (TRANS_AT / 100)
            let scrolled = document.documentElement.scrollTop
            let goto = section_top - offset
            let speed = Math.abs(scrolled - goto) / 10
            flow = false
            console.log('start animating')
            $([document.documentElement, document.body]).animate({scrollTop: goto}, speed, function () {
                if(!$(this).is('animated')) flow = true
            })
        }
        $('.nav-btn.active').removeClass('active')
        $('.bub-btn.active').removeClass('active')
    }

    $(`.nav-btn[data-name=${name}]`).addClass('active')
    $(`.bub-btn[data-name=${name}]`).addClass('active')

    console.log(hash, name, window.location.hash)
}

function bubble_up() {
    let hash = window.location.hash.substr(1)
    let buttons = $('.bub-btn')
    for (let i = 0; i < buttons.length; i++) {
        if (buttons[i].dataset.name === hash) {
            if (i > 0) {
                let name = buttons[i - 1].dataset.name
                nav_click(name)
                break
            }
        }
    }
}
function bubble_down() {
    let hash = window.location.hash.substr(1)
    let buttons = $('.bub-btn')
    for (let i = 0; i < buttons.length; i++) {
        if (buttons[i].dataset.name === hash) {
            if (i + 1 < buttons.length) {
                let name = buttons[i + 1].dataset.name
                nav_click(name)
                break
            }
        }
    }
}
let fresh = true
function set_nav_on_scroll() {
    console.log(`flow: ${flow}`)
    if (flow) {
        let window_height = window.innerHeight
        let scrolled = document.documentElement.scrollTop
        let at_top = scrolled === 0
        let at_bottom = (window_height + window.scrollY) >= document.body.offsetHeight
        if (at_top) {
            $('#bub_up').addClass('disabled')
        } else {
            $('#bub_up').removeClass('disabled')
        }
        if (at_bottom) {
            $('#bub_down').addClass('disabled')
        } else {
            $('#bub_down').removeClass('disabled')
        }

        let buttons = $('.bub-btn')
        let hash = window.location.hash.substr(1)
        let offset = window_height / 100 * (TRANS_AT + 25)
        for (let i = 0; i < buttons.length; i++) {
            let name = buttons[i].dataset.name

            if (i === 0) {
                if (scrolled >= 0 && scrolled < window_height) {
                    if (name !== hash || fresh) {
                        nav_click(name, false)
                        fresh = false
                        break
                    }
                }
            } else if (i === buttons.length - 1) {
                if (at_bottom) {
                    if (name !== hash || fresh) {
                        nav_click(name, false)
                        fresh = false
                        break
                    }
                }
            } else {
                let selection = $(`.section[name=${name}]`)[0]
                let height = $(selection).height()
                let section_top = selection.offsetTop - offset
                let section_bottom = section_top + height

                if (scrolled >= section_top && scrolled < section_bottom) {
                    if (name !== hash || fresh) {
                        nav_click(name, false)
                        fresh = false
                        break
                    }
                }
            }
        }
    }
}