Amazing scrollbar in div ( html and css only )

Показать описание

simple scroll bar in div tutorial using only html and css
if you have questions concerning this video feel free to head
down to the comment section
- - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
if you find this video helpful please like and susbcribe
--------------------------------------------------------------------------------------

Track: Netrum - Colorblind (feat. Halvorsen) [NCS Release]
Music provided by NoCopyrightSounds.

Рекомендации по теме

Комментарии

I usually just use 1 nested div. You make the parent position relative. Make the inner absolute. Set the inner to width and height 100% (or max width/height 100%). Then set the inner to overflow either scroll or auto.
This works nicely for responsive layouts as the inner div can never cause the outer to grow when you don't want it to.

ragnarok

اخويا ال مني iam following you from egypt ....thank u

mohamedhamdy-jcyl

Thank you, I learned it just now from you.

md.sahaibmridha

I used width, height, overflow and overflowY in a div element with text but it just does not render the text after height, there is no scroll. I have no idea why :/

LucasFelixDantas

Thank you so much!

*Can you please tell me how to change property of that scroll bar? I want it slim with a rounder radius*

rushaan

Is there a way to force the scroll bars to show on mobile browsers?

On my mobile browsers (Android) the scrollbars are not present, and only show when I touch the scree and try to scroll. I have the following to make a scrollable div box:

CSS CODE:

/*SAMPLE SCROLL BOX using div*/

#ScrollBox{
width: 100%;
height: 200px;
/*overflow-y: scroll; */
overflow-y: auto;

Padding:15px
}

/*Add paragraph spacing to text.*/
#ScrollBox p {
line-height:25px;
padding-bottom:15px;
}

/*Add shadow to scroll box*/
#ScrollBox {
box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2), 0 6px 45px 0 rgba(0, 0, 0, 0.10);
}

HTML CODE:
<div id="ScrollBox">Sample content text. Sample content text. Sample content text.</div>

I have tried the *overflow:auto* and *overflow:scroll* properties and none seem to do the trick.
I put the whole code here for anyone to grab. It looks very nice, and always shows fine on computer, but not on my phone unless I touch and scroll. You can see it working here.

*Any help will be appreciated. Thanks!*

cristovieneya