A customer has a website with a dark teal design and is not pleased with the appearance of the scroll bar, as it disrupts the overall style. The client requested that I find a solution without using third-party libraries, and one that they can easily understand. My solution was to create a div element, set it to position: absolute;, give it the same background color as the theme, and then adjust the opacity to 0.8; for a more cohesive look.
The client expressed satisfaction with the outcome, believing that I had created a custom scroll bar upon first glance. However, an issue arose where users were unable to interact with the scroll bar due to the overlapping div element. Is there a way to make the covering div visible but still allow clicks, hovers, and scrolling to pass through to the underlying div? Currently, hovering over the scroll bar triggers actions on the overlapping div, rendering the scroll bar nonfunctional until returning to its original state.
Any assistance on this matter would be greatly welcomed.
Edit: Included an image to better illustrate the situation. The overlapping div gives the illusion of blending in the scroll bar with the surroundings, but user interactions are being redirected to the overlaying div instead of the actual scroll bar.
Edit2: Updated image