0

Consider a scenario when you have a responsive design, with 3 columns.

On desktop:

  • left menu
  • main column (whole page is scrollable)
  • right menu

On mobile:

  • top menu
  • main column (scrollable)
  • bottom menu

On desktop when scroll event occurs anywhere on the page - I would like to be able to scroll the content inside the content column. On mobile, we scroll the content within the main column itself.

Here is the example: https://jsfiddle.net/sf8m97L2/5/

https://user-images.githubusercontent.com/20644772/165400320-e26e7157-3014-4dda-800d-2e441c98c654.mp4

So here comes my issue/question - is it possible somehow to propagate scroll events from anywhere on the page to the perfect-scrollbar target location (in my case, form body to the content column)?

Currently if the user wants to scroll the content in the main column the user has to hover the mouse over that area specifically. I would like to allow scrolling when the cursor is outside the default zone. Please check the fiddle.

Using latest version 1.5.5

Alex
  • 4,607
  • 9
  • 61
  • 99

1 Answers1

1

You can use Sticky-sidebar to do what described.

Of course, the scroll bar will not be in blocks, but in the main window, but you can scroll while holding the cursor at any position of the document

See example: https://blixhavn.github.io/sticky-sidebar-v2/examples/basic.html

White Crown
  • 56
  • 2
  • https://www.npmjs.com/package/sticky-sidebar-v2 – White Crown Apr 26 '22 at 23:35
  • this is actually very similar to what I am doing now. `top:0, position: sticky` for the sidebars. My issue was that I wanted to stylize the scrollbars. They need to look and feel the same regardless the browser or the OS. This is what I use the `perfect-scrollbar` for. Not all browsers have a support for scrollbar styling natively.. – Alex Apr 27 '22 at 07:27
  • I ended up going with non-js scrollbars solution rather than trying to climb this mountain – Alex Apr 30 '22 at 17:46