is there a way to position absolute a scrollbar?
screenshot for a reference, i've added a overflow to scroll to the main panel of dashboard i dont want the side bar to scroll.
but i want the scroll bar to be at the right corner of the screen position absolute isn't working. is there a work around
13 Replies
you've probably got a margin on the right side of the main content div. Change it to a padding, that'll push the scrollbar to the right
the scrollbar will always be on the extreme right of the element that's scrolling, so your only solution is to make the element end where you want the scrollbar to be (or to roll your own which is a lot of hard work and an accessibility nightmare you should never attempt)
what i am doing right now is i'vewraped the wholething into 1 div to maintain the max width
is there a way to maintain a maxed with
while using padding for this
a wrapper div. have that one be the scrolling one and the content div inside be the one with the margin or padding (doesn't really matter then anymore)
box-sizing : border-boxcan you please elaborate?
what i did now is wrapped the whole thing into a container annd outer div is full width
now the scrollbar is at the corer
but the side bar is also scrolling
how do i make it stick there?
sticky isnt wornking
you'll have to share your code at this point, preferably in something like codepen or another live version
made it work
😮💨 finally
what was the thing?
scrollbar
Box-sizing: border box takes the border and padding to count within any sizing defined instead of adding it on as extra.
You’ll see in many resets that it’s defined on the
*, *::before, *::after selector
So if you have a width of 200px, your 10px border and padding of 2em is included in that 200px