Hello,
I have a page generated by Node-RED for managing my electric heating. I’m increasing the number of zones a bit to better manage my consumption.
On this page, I have a lot of sliders (sliders) and the page is quite large with the hourly schedules.
The problem is that when I scroll down the page with the mouse wheel, if I hover over a slider, it changes its value. If I’m not careful, it can be annoying.
I’ve been trying for a while to disable the mouse wheel events for the sliders without success.
ChatGPT helped me write most of the code.
The events are detected properly, but the mouse wheel remains active on the sliders.
I Use ui-template with this code
<script>
(function() {
// Fonction pour désactiver la molette sur un slider
function disableSliderWheel(slider) {
slider.addEventListener('wheel', (event) => {
console.log(`Desactivation molette slider ${slider}`);
event.stopImmediatePropagation(); // Empêche tout autre écouteur d'exécuter cet événement
event.preventDefault(); // Annule le comportement par défaut
}, { passive: false }); // Permet de prévenir explicitement l'événement
}
// Observer les changements dans le DOM
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList') {
console.log(`Mutation détectée`);
// Rechercher tous les sliders ajoutés dynamiquement
const sliders = document.querySelectorAll('md-slider');
sliders.forEach((slider) => {
if (!slider.dataset.wheelDisabled) {
disableSliderWheel(slider);
slider.dataset.wheelDisabled = true; // Marquer comme traité
}
});
}
});
});
// Configurer l'observation pour tout le document
observer.observe(document.body, {
childList: true,
subtree: true
});
// Désactiver la molette pour les sliders déjà présents au chargement
document.addEventListener("DOMContentLoaded", () => {
const sliders = document.querySelectorAll('md-slider');
sliders.forEach((slider) => {
console.log(`Desactivation molette slider déjà présent ${slider}`);
disableSliderWheel(slider);
slider.dataset.wheelDisabled = true;
});
});
})();
</script>
