I Had No Idea This Scroll Bar CSS Property Existed
HTML-код
- Опубликовано: 14 июн 2023
- 🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Shorts
The last sentence sums it up for all css fixes
And it’s always mentioned at the very last second 😂😂
And it's always Safari
The new IE
Browser support. Probably the developer's biggest issue to fix😢
It's web developer vs browser developer 😂
@@lord_kh4n 😅😅😅 Yeah eish. If I didn't laugh I'd cry. That's how bad it can get sometimes
@@lord_kh4nand also vs people not updating their browsers
When you are feeling happy, remember there is always browser support
I really wish I knew about this like last year. I made work arounds using JS, that took hours, to replicate this effect
This is much needed feature.
seems to be a rare property. Never heard of it
Watching this on short and I missed all the edge content. I can only see the middle bit of the video.
Lol can you fix RUclips's padding?!
as long as it is well supported by chrome and chromium based browsers, it's not that much of an issue, Safari & Firefox don't have that by default gutter !
good to see that css is becoming even more powerful
Safari has left the chat
The browser support might not be there but it's a noncrucial prop and is still useful whenever it works.
I was excited about this to solve the issue where putting overflow:hidden on the body causes the page to shift, for example when you open a modal, but this is a bad solution for that issue because then there are always 15 pixels of dead space, which is a no-no for basically all designs. for example you won't be able to do a carousel that goes all the way to the edge of the screen. :(
Thankyou brother , really informative video
Theres a hacky workaround for this, but this is a great feature. Hope its fully supported soon
which?
Am I the only one who can't see the right side? It's literaly overflowing on my screen, no joke intended
exactly what I came to the comment section to check. I have the same issue
Yep, RUclips auto-scales the video for your device, I've left a comment and got a reply.
Must've put an overflow hidden on it 😂
time to center all my divs with that
How does this work on macOS compared to windows? The scroll bars have different widths.
I imagine the browser handles that.
The same way DVH/W is handled by the browser.
It doesn't matter. If you're on Windows or any other os, all scroll bars will be consistent for that particular os. The issue this video is tackling is, how to stop the jump/shift of the content when a scroll bar appears. disappears in a container.
actually huge, guessing scrollbar sizes never again
thanks bro
just another rabbit hole to worry about. ship first
i love you, thanks man
You are awesome!
I don't see a practical use case where I would use these, besides when you do start pixel pushing (is it called like that in english? I mean when you perfectly adjust your pixels)
A very good use case would be a modal window with dynamic content in it, like a form that grows bigger than the screen when error messages are displayed :)
Thank you 👍
Классная фича. Как раз очень нужно для проекта, а я и не знал как это сделать))
i watch all your video. seems u are strong in js. Can u make course about 3D library like three.js ..?
What happens if you use scrollbar-gutter with overflow:auto? does it apply twice?
no
-webkit-scrollbar{ width: 0px; } - this will hide your scrollbar
Excellent
Can you put the scroll bar on top of the page so it doesn't need to shift across? Sort of like a z-index equivalent for the scroll bar
That's overlay scrollbars. They were (somewhat brokenly) implemented in Chrome at least and were being proposed for stabilization, but Apple blocked it saying, basically "it's a user preference", and instead this got added.
Cool, but I can't see what happens when you add it in a mobile formfactor. You should've split the bottom of the video and animated it to show the change.
It looks like RUclips is taking my video (which is 9x16 aspect ratio) and zooming it in if your phone is greater than a 9x16 aspect ratio instead of keeping the full video and adding black bars to the top/bottom. Unfortunately, there isn't much I can do about this (other than try to push the content more central in the future) as I was unaware RUclips did this and really wish they didn't.
@@WebDevSimplified ah dang. Makes sense.
Isn't 20:9/21:9 the most common ratio for phones nowadays?
Most phones ditched the physical buttons and also removed the forehead and replaced it with a holepunch or notch.
Doesn't help that I use swipe gestures so I have the full screen for display, no buttons at the bottom.
How can you still intact the full website in this 1080x1920 resolution for yt shorts?
wow great!
Very nice
Wow nice content
Not working for me could you provide the code so that I can copy & paste to see if it’s a me error or not?
Very cool
Is it there a solution that works with chrome, if I don't have the latest version?
GOD!!!!
Is there an equivalent for the horizontal scrollbar?
It'll work with all alignment it seems
How about “overflow: overlay;”?
It’s an alias to overflow: auto
@@cool_boyua But if the overflow is overlay, it won’t take out space.
It makes me so mad all the stupid BS we have to deal with that should have just been a feature 10 years ago and the fact that this crap has to be opted into instead of treated as a default behavior, because people already fixed the stupid BS and will refuse to remove their stupid fixes
True, I watched as a colleague spent almost a full day, just getting this right with JS, so it works correctly, responsively, on all browsers. Felt so mundane and stupid.
Lol always safari ..
I'll rather love removing it entirely 😅
Am the 1,5 k like i feel so proud for no reason 😭
Can’t see the right side example 👎
Totally worthless information. No info on how to fix scrollbat
not anchoring.
chrome + firefox are the only browsers worth checking. the rest of them simply do not matter
Sandly people in the US are big fans of Apple crap, and plenty of them just use the default browser, meaning Safari :S