How to put a custom cursor on one of the particular section in a horizontal scroll website?

Question

Where the cursor is currently and not moving to the next sectionI have a horizontal website, that is divided into sections and I am trying to put the custom cursor on a particular section. But whenever I am trying to do it the cursor after the first section moves out from the page. <div class="cursor"></div><script>const cursor =document.querySelector('.cursor');document.addEventListener('mousemove', (e) =>{cursor.style.left = e.pageX + 'px';cursor.style.top = e.pageY + 'px';})</script>

then css: .cursor { position:fixed; width: 20px; height: 20px; border-radius: 50%; background-color: #dfd3c3; transition: 0.1s; transform: translate(-50%, -50%); pointer-events: none; }

Answer 1

How to put a custom cursor on one of the particular section in a horizontal scroll website?

Check out the cursor css property here, or here.

.cursor {
 cursor: pointer;
}