FEATURE: Debounce Scroll Event in navbar.js

[harshshukla06]

Feature Summary

"Debouncing" is a technique to limit how often a function (like one triggered by scrolling) is called, improving performance and reducing unnecessary work. When applied to scroll events, debouncing ensures the event handler is only executed after the user has stopped scrolling for a specified delay.

Description

The scroll event triggers frequently, which could impact performance. You can use a debounce function to limit the number of times the navbar background color is changed.
This prevents the event from firing continuously, which can be costly in terms of performance, especially when the page has visual updates during scrolling.

Proposed Solution

const mobileMenu = document.querySelector(".mobile-menu");
const mobileTrigger = document.querySelector(".mobile-menu__trigger");
const overlay = document.querySelector(".overlay");

let initialPoint, finalPoint;

document.addEventListener("touchstart", function(event) {
initialPoint = event.changedTouches[0];
});

document.addEventListener("touchend", function(event) {
finalPoint = event.changedTouches[0];
let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX),
yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);

if (xAbs > 120 || yAbs > 120) {
    if (xAbs > yAbs) {
        if (finalPoint.pageX < initialPoint.pageX) {
            // Swipe left
            mobileMenu.classList.remove("mobile-menu_open");
            overlay.style.visibility = "hidden";
        } else {
            // Swipe right
            mobileMenu.classList.add("mobile-menu_open");
            overlay.style.visibility = "visible";
        }
    }
}

});

mobileTrigger.addEventListener("click", function() {
mobileMenu.classList.toggle("mobile-menu_open");
overlay.style.visibility = mobileMenu.classList.contains("mobile-menu_open") ? "visible" : "hidden";
});

overlay.addEventListener("click", function() {
mobileMenu.classList.remove("mobile-menu_open");
overlay.style.visibility = "hidden";
});

// Debounce function
function debounce(func, wait = 20) {
let timeout;
return function() {
const context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}

// Scroll event with debounce
window.addEventListener("scroll", debounce(function() {
const navbar = document.querySelector(".navbar-collapse");
const navLinks = document.querySelectorAll(".navbar-nav .nav-item a");

if (window.scrollY > 50) {
    navbar.style.backgroundColor = "#1a1c29";
    navLinks.forEach(link => {
        link.style.color = "#ffffff";
    });
} else {
    navbar.style.backgroundColor = "#2b2d42";
    navLinks.forEach(link => {
        link.style.color = "#edf2f4";
    });
}

}, 20)); // 20ms delay for debounce

function toggleDropdown(show) {
const dropdownMenu = document.querySelector('.dropdown-menu');
if (show) {
dropdownMenu.style.display = 'block';
} else {
dropdownMenu.style.display = 'none';
}
}

Alternatives Considered

No response

Screenshots/Logs

No response

Additional Information

• I have searched for existing feature requests
• I am willing to help implement this feature
• I can provide more details or clarification if needed

[github-actions]

👋 Thanks for opening this issue! We appreciate your contribution. Please make sure you’ve provided all the necessary details and screenshots, and don't forget to follow our Guidelines and Code of Conduct. Happy coding! 🚀

[github-actions]

👋 Thank you for raising an issue! We appreciate your effort in helping us improve. Our FinVeda team will review it shortly. Stay tuned!