Fade Scroll uses CSS masks to blend seamlessly with any background.
Horizontal Fade Scroller
The CSS can be changed to use linear gradients for better compatibility if the background is a solid color.
Horizontal Fade Scroller
Vertical Fade Scroller
To hide the scrollbar, set hideScrollbar: true in the options.
Horizontal Fade Scroller
Vertical Fade Scroller
But how to scroll sideways without a visible scrollbar? Some input devices come with a mechanism to scroll sideways — otherwise the “usual” way to scroll sideways is by holding the Shift key while spinning the mouse wheel, but there is another way…
Users may prefer to scroll sideways by using the mouse wheel normally, especially when the scrollbar is not visible. To enable this behaviour, set captureWheel: true in the options. This will translate mouse wheel movement to horizontal scrolling.
Horizontal Fade Scroller
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Section 2
Suspendisse ac sagittis lacus. In sagittis eleifend risus quis ullamcorper.
Section 3
Cras vel nunc id purus pellentesque tincidunt nec convallis nisl.
Section 4
Duis nec volutpat est, eu vulputate est. Duis nec dictum ipsum.
Section 5
Aenean volutpat neque nec massa mattis facilisis eget nec erat.