Ask coding questions

← Back to all posts
How to make a scroll bar?
Coder2404 (361)

I need to know this so I can add it to my website...

Comments
hotnewtop
LegendaryWolf (708)

hi, I can fix your problem, use this code in your CSS

body{
  overflow: scroll
}

Make this answered if you find it helpful :)

codingjlu (86)

@Coder2404 First, your webpage needs to be long enough. If it just perfectly fits your screen, there's no need for a scroll bar. If it doesn't, and your page is longer or wider, you'll have a default scrollbar automatically.
If you want to customize your scrollbar, check out this link: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

I might be able to help you do it manually too if you give me access. But I suggest you learn how to do it because in the real world you won't always have someone to help you.

Coder2404 (361)

@codingjlu so you said: But I suggest you learn how to do it because in the real world you won't always have someone to help you.
And I said: ok because YOU said: because in the real world you won't always have someone to help you. so that’s why I said ok..

Coder2404 (361)

@codingjlu ok then talk to you tomorrow

Coder2404 (361)

@codingjlu oh anyways how have you been? I’ve been good... how about you?

codingjlu (86)

@Coder2404 The easiest way is just to put the following code in between you <style> tags:

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

And go here to customize: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

Coder2404 (361)

@codingjlu sadly no, but I think I know how to fix my problem! And thanks for all your help, I appreciate it :)

Coder2404 (361)

@codingjlu I’m sorry your way didn’t work

codingjlu (86)

@Coder2404 Okay... how'd you make it work?

Coder2404 (361)

@codingjlu I think I can do it by changing the padding...I don’t know if it will work ..and I will test it TOMORROW..do have any idea if it’s gonna work?

codingjlu (86)

@Coder2404 I'm not sure exactly what you're doing... can you show me?

Coder2404 (361)

@codingjlu I still don’t know how to make a scroll bar :(

Coder2404 (361)

@codingjlu YOU THERE!?
Oh, I didn’t mean to raise my voice, sorry..

codingjlu (86)

@Coder2404 Yes... do you need help?

Coder2404 (361)

@codingjlu yes on my website tomorrow and I gtg

tussiez (1532)

If your webpage is long enough, a scrollbar will show up (system default). See @SameeraMurthy 's answer for custom scrollbars.

Coder2404 (361)

@tussiez heyyyy how have you been?

tussiez (1532)

@Coder2404 Pretty good! How are you?

Coder2404 (361)

@tussiez why weren’t you responding before? Anyways I’m good...

tussiez (1532)

@Coder2404 K, my notifications were spammed so I missed some things

Coder2404 (361)

@tussiez who spammed you? And that’s really bad

tussiez (1532)

@Coder2404 Oh no just annotations from SortaCraft

Coder2404 (361)

@tussiez heyyyyyy how have you been????

SameeraMurthy (110)

Solution

@Coder2404 if you add enough content to your website it makes a scrollbar so you can scroll through the content.

If you are wanting to customize the scrollbar then use this reference:

https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

SixBeeps (5067)

If you want something to scroll, you can set it's overflow properties in CSS:

#scroll {
  height: 200px;
  overflow-y: scroll;
}
Coder2404 (361)

@SixBeeps it doesn’t work, did I do something wrong?

SixBeeps (5067)

@Coder2404 There needs to be enough content (that fits within the height) to scroll. If there isn't, you can always make the height shorter.

Coder2404 (361)

@SixBeeps ohhhh thanks, I get it now...:p

Coder2404 (361)

@SixBeeps for some random reason it doesn’t work anymore!