Hi!
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.
Help, how I can do this feature?
Hi @alcompstudio,
This can be done by fixing the height of both the containers and apply the Overflow-y property as scroll from the Style manager.
This can also be done by applying the Bootstrap Class overflow-y-scroll as mentioned here Overflow · Bootstrap v5.3
Let me know if you need some help, i can get a quick tutorial prepared for this.
Thanks.
@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 
Hi @alcompstudio,
Glad to know that it worked for you 
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.
Please take a look and let me know if this helps.
Thanks.
@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
That’s how such a thin scroll bar in the search popup is made? Something like that I want to implement, too. But I don’t know how yet. It’s probably achieved with both a custom CSS and Javascript. Maybe I’ll try to find some sample code for scrollbar visualization on the Internet.
Hi @alcompstudio,
The link which i sent has the same thing - thinner scrollbar like you asked.
There are several css/js libraries which provides this feature. This one works seamlessly with Bootstrap 5 and is part of their examples.
Let me know if you need any help in implementing it.
Thanks.
It’s weird, but I still have a wide scrollbar
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.
This seems weird. I am on Chrome on MacBook. The purpose of this library is only to beautify the scroll bar and it should work on all the standard browsers/operating systems.
If it is not working on their example itself, then in am not sure it it will work on DrapCode. Let me see if there are any other ways to do it.
I would be glad if you find a way to implement this feature!
I found some solution with CSS that will help me initially. html - Property scrollbar-width not working in css - Stack Overflow - this post shows how to change the scrollbar settings. Maybe someone else will find it useful )
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 ?
And one more question, would there be any help?
When a scroll bar appears (even a thin one), it adds its size (thickness) to the existing container, as a result the size will increase, which is not good. I was trying to find how to place the scroll bar ahead of the content, I found the answer in this post html - how to make scroll bar overlay content - Stack Overflow , but there is a recommendation on the Javascript library, I am not strong on how to apply it. And with CSS I couldn’t find the right code. Do you have any idea about 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.
Hope this helps.
Hi @alcompstudio,
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.
Thanks.
Thank you for your response!
