I'm currently working on a unique React.js website that features a horizontal-scrolling portfolio. The website functions as a visual gallery, allowing users to easily scroll through images using their trackpad.
Within the website, I have set up a large container with the following styling:
overflow-x: scroll;
overflow-y: none;
-ms-overflow-style: none;
scrollbar-width: none;
However, I recently realized that this design may not be user-friendly for those using a mouse on a desktop computer, as horizontal scrolling without a scrollbar can be challenging. To address this, I am now working on implementing a scroll conversion feature to facilitate horizontal scrolling for all users.
After exploring different solutions, I attempted to use the following code snippet:
const scroller = document.getElementById('pageContainer');
window.addEventListener('wheel', e => {
scroller.scrollLeft += e.deltaY;
});
Unfortunately, this implementation caused issues with scrolling, impacting both vertical and horizontal movement. The scrolling appeared jerky and inconsistent, which was not the desired effect.
At this point, I am seeking guidance on the best approach to achieve smooth horizontal scrolling while maintaining functionality for users with different devices. I aim to create a seamless scrolling experience, potentially incorporating a sinusoidal motion for circular scrolling.
EDIT:
While exploring solutions, I came across a codepen that demonstrated the desired scrolling behavior. Although my implementation did not yield the same results, it inspired me to consider tweaking the scroll-behavior: smooth; property in my CSS, as it could potentially impact scrolling behavior.
My current challenge is finding a way to harmonize these modifications and ensure that all scrolling features work cohesively on the website. Any insights or suggestions on achieving this balance would be greatly appreciated.