What I am trying to do is when you mouse out over the dropdown menu items the scroll wheel gets reset. I've tried several options that I've been able to find online yet I cant seem to get it to work.
Is there anyone who has an idea on how to do this?
function resetScroll(){
var scrollPosition = document.getElementsByClassName('list_in_column');
console.log(scrollPosition);
scrollPosition.scrollTop = 0;
}
https://jsfiddle.net/Amyttyl/uyh5g7zo/
I've tried the ScrollTop(https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) and ScrollTo (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo)functions in jQuery but they don't seem to work for me. I'm only a beginner at jQuery so i don't know what i'm doing wrong.
The display:none that i was using on my menu made it so that scroll to did not work. changing the display:none to opacity: 0 & pointer-events: none; and using this javascript
document.querySelectorAll('.mega-drop-down').forEach(dropdown => {
dropdown.addEventListener('mouseleave', (element) => {
dropdown.querySelector('.row').scrollTo({
top: 0,
behavior: 'smooth',
});
});
}
);
made it work well as you can see in the following fiddle https://jsfiddle.net/9c7g86w1/