I have a sidebar menu (left side of the page) and a container for the main content (right side of the page). I need the scrolling to be done in each part independently of each other. That is, when hovering over each area in those parts.
@vishsahu , thank you for the helpful hint, it was very helpful. What’s more, I experimented a bit and made the scrolling exactly the way I wanted it!
I specified height = 100vh as the fixed container size (so that the container would take up the full screen height). I did this separately in Snippet (so that the sidebar menu has the desired scroll effect of only one column) and separately in the column - on the web application page itself.
You can also see in my video that the information bar at the top is a bit out of place. I had to hide it in the browser console to see the most accurate rendering of the page.
I have the only other question - can I somehow customize the scroll bar design, for example I need to make it narrow, maybe change color, or make the scroll bar appear when hovering. But at least make it smaller/narrower. The standard size, which is set by the browser doesn’t look very attractive, and takes at least an extra 20 pixels
I would suggest you try overflow-y-auto instead of overflow-y-scroll, this will not put the scrollbar automatically and will only add it if needed. Try to reduce the height from 100vh to 90 or 95vh, this will also help.
For your other question about beautification of scrollbar, please see this Scrollspy · Bootstrap v5.3 library. It has several examples to build exactly what you need, with different options.
You can just copy paste their custom html using the Custom HTML code component if needed.
@vishsahu , thanks for your reply and the link to the documentation, but that’s probably not exactly what I want (at least I didn’t see the information I wanted). I wanted the scroll bar to be thinner than it is in the standard display. That is, to be able to reduce it in thickness, as in the example in the same Bootstrap
It probably has something to do with the kind of browser (I have Chrome), maybe also the operating system (its built-in design). I have Windows 11, in iOS I’ve noticed, the scrollbar almost always has the look you have in the screenshot now. I could be wrong of course.
I’m not good at CSS, so my question is, how do I apply this method to all available containers, columns, rows at once? Right now I have to specify a class for the required column/container and only then apply the CSS code to each class separately. This is very cumbersome, long and inconvenient. If I have a lot of such containers, where I need to apply scrollbar, I have to set classes to all containers and make very long CSS code. How to avoid it ?
You don’t need to create separate classes for each of the components again and again.
Just create one class, apply the CSS to that class and then add that same class to all the components where you want this effect. This way you can control everything from a single css class and in the future if you want to change anything then just change in the CSS class and those changes will be reflected everywhere.
The easiest way is to keep the width of your container a bit less from the parent container and leave some space for the scroll bar, so that when the scrollbar appears, then it won’t push your content towards the right or outside of the component.