Hi, I am sure you might have juiced down your brain for a scrollbar functionality when you were a budding developer. Ya, I am writing about a scrolling behavior for an element without having a scrollbar.
In recent years, the UX people refer to the horizontal scroll for some of the basic use cases like a menu bar, tabs, categories, banner ads, etc., It is most preferred in mobile templates as this occupies less space & improves UX to the users.
Okay, so what’s the real problem is with this for coders? Any guesses?
It’s with the scrollbar. Can we scroll the contents without a scrollbar?
{
overflow: auto;
}This will work? This works smooth but the scrollbar visibility isn’t taken care of while scrolling.
::-webkit-scrollbar {
width: 0px;
background: transparent;
}Okay, gotcha? This works with WebKit based browsers only. So what’s the solution with CSS?
I don’t want to write much & bore you rather I wanna fascinate you by the code ;)
Did you notice the magic CSS trick? Ya, that’s my solution code with 100% browser compatibility.
.magic {
padding-bottom: 30px;
}.magic-wrapper {
height: 35px;
overflow-y: hidden;
width: 100%;
}
What exactly it is?
- I have the magic wrapper outside the scrollable contents with a XX height
- The padding-bottom hides the scrollbar with its immediate parent magic-wrapper’s height
Inspect the element & understand the trick by visualizing it. Use these CSS classes at a higher level in a big project to reuse the code & enjoy clean code.
I am in the mission of writing content for the budding developers. I am more likable to write about a simple solution for a problem that seems to be tough at first sight but actually, it’s not. If you have such any ideas or faced at your career inception, drop in the comment box.
Please write if you have any queries, ideas or anything to write about in the future.
Here we go with the crazy sign off (please read as you can watch in the youtube channels) Please, Like, Comment, Follow & Subscribe to my blog site!!!
Mind reading about my other blogs? How about reading Alternate to scrollIntoView() ?
