CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
jdogg
jdogg

Reputation: 268

Enable scrolling inside a data-spy "affix"

I've got an affixed data-spy side-menu div that has too many elements to fit in my browser window. The side-menu contains links that anchor to other areas in the same page.

Currently, the div is affixed to the page just fine, but since there are too many elements I can only navigate to about half the links in the menu. This is bad because I want to be able to easily go from item to item no matter where I'm at in the page - the page is very long.

If I add style="overflow:scroll;", a scrollbar appears in the affixed div, but the scroll is grayed out and it won't actually scroll.

How can I make the affixed div scrollable?

Upvotes: 2

Views: 1433

Answers (2)

ZZ-bb
ZZ-bb

Reputation: 2167

This is what worked for me (and what I copied from Bootstrap's documentation page...)

height: max-height: calc(100vh - 4rem);
overflow-y: auto;

Now the scrollbar appears only when needed (viewport height is insufficient for the content). Seems to work nicely at first glance...

See also: How to add auto scroll bar vertically to cssbootstrap affix menu for smaller screens?

Upvotes: 1

alexey
alexey

Reputation: 801

Add height property to your div.

Upvotes: 2

Related Questions