Im new to code, know a bit of HTML and CSS, and really none of js.
Im trying to do this website in cargo 2: www.empressao.com
what I want is that when im with the mouse inside my columns, the scroll for the body stop, and just work for the columns themselves. I did it work with JS in my .html file, in my computer, but when I past the scrips on the custom HTML box, it does not work.
What I really want is that when I have the mouse inside my “sticky” box, the box itself stops, and just the content inside scrolls. I just want to achieve that because, when im scroll to the top of each column, the container itself flies and is not very “user-friendly”.
<script>
document.querySelectorAll('.column').forEach(column => {
column.addEventListener('mouseenter', () => {
document.body.style.overflow = 'hidden'; // Disable body scroll
});
column.addEventListener('mouseleave', () => {
document.body.style.overflow = ''; // Enable body scroll
});
});
</script>