CSS or JQUERY Vertical Scrollbar BUT WITHOUT SETTING HEIGHT

Question

I have some Jquery/CSS web pages which dynamically take into account screen width and then positions the DIV cells either as 1 column or 2 column. Adding a new cell is as simple as creating a new DIV and the page formats itself accordingly.

My main issue is that I cannot show a vertical scrollbar. While I know that I can use my mouse wheel to scroll down, the site owner wants a vertical scrollbar so that others may know as well. There are tons of examples of Jquery vertical scrollbars out there, but they all require setting a height or a maxheight, which I cannot set because the page handles its own formatting.

An example of one of the pages is here: Example

Is there any way I can get a vertical scrollbar onto this page that would produce the same results as it currntly does simply using the mouse wheel

Thanks!

why not use css overflow:auto?

user1721135
– user1721135

2013-07-18 16:34:59 +00:00
Commented Jul 18, 2013 at 16:34 — user1721135
– user1721135, Commented Jul 18, 2013 at 16:34

Stinodotbe · Accepted Answer · 2013-07-18 16:42:20Z

2

The first problem is you have margins, and a width of 100%. The margins are added to the width of the block. Because of that your .parent isn't totally visible on your page.

div.parent {
    width:auto;
    overflow-y:scroll;
}

edited Jul 18, 2013 at 16:42

answered Jul 18, 2013 at 16:35

Stinodotbe

4023 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stinodotbe Over a year ago

I changed a bit of my answer, the way I tested it on your website works for me. If you're using mac with magic mouse or touchpad the scrollbar will be invisble unless you're scrolling;

Ira G Over a year ago

THANK YOU! I had been trying for a week before I posted here.

mash · Accepted Answer · 2013-07-18 16:34:54Z

1

In your .parent div you have a margin-left: 2% and margin-right: 2%. Remove the margin-right: 2% and make the width 98% and your scrollbar will appear.

The reason for this is that your margins push the scrollbar off of the screen, when the width is 100%.

I would also suggest removing the overflow-y: scroll from the <html> tag, as it just seems to create a giant disabled scrollbar, could be confusing to users and seems to be a waste of space.

answered Jul 18, 2013 at 16:34

mash

15.3k3 gold badges32 silver badges36 bronze badges

2 Comments

mash Over a year ago

@danrhul Wrong, only the former is required, the latter is only a suggestion.

Hristo Valkanov Over a year ago

Lol he is correct, removing the margin-right and adding width: auto on the #parent div fixes the issue! O.o

Godwin · Accepted Answer · 2013-07-18 16:43:29Z

1

The margins on the div.parent element are shifting it too far to the left hiding the scrollbar. You should change these to padding or remove the 100% width on it:

div.parent {
    /* width: 100%; */
    margin-left: 2%;
    padding-right: 2%;
}

answered Jul 18, 2013 at 16:43

Godwin

9,9576 gold badges44 silver badges62 bronze badges

Collectives™ on Stack Overflow

CSS or JQUERY Vertical Scrollbar BUT WITHOUT SETTING HEIGHT

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related