easiest way to achieve scrolling of content

Question

I have the following structure - jsFiddle:
HTML

Part1

Elem1
Elem2
Elem3

Part2

Elem1
Elem2
Elem3

Part3

Elem1
Elem2
Elem3

Part1
Part2
Part3

CSS

#container {
    float:left;
}
#controls {
    float:right;
}

When I click on the controls the page moves to the selected part. That's the standard behavior. What I want is that the page stays and only the content of container moves. What is the easiest way to achieve this? Can it be done with pure CSS? Or maybe there is already a code snippet I could use? My thoughts: I can set overflow hidden for container and when clicked set negative margin-top for content with JS. Is it the right way to do it?

@Pay4m There might be more than that on the real page... – JNF Dec 18 '13 at 08:20 — JNF, Dec 18 '13 at 08:20
Looking for http://stackoverflow.com/q/8159264/1305911? – JNF Dec 18 '13 at 08:21 — JNF, Dec 18 '13 at 08:21

George · Accepted Answer · 2013-12-18T08:35:47.487

2

Yes, overflow does exactly this. If you set it to auto it will give #container it's own scrollbar, if it overflows. It will need a specified height though:

#container {
    float:left;
    height:600px;
    overflow:auto;
}

JSFiddle

And if you wanted to make it 100% the height of your page:

JSFiddle

edited Dec 18 '13 at 08:35

answered Dec 18 '13 at 08:20

George

36,413
9
66
103

True, but notice that the page also scrolls as well - hiding the links – Danield Dec 18 '13 at 08:23
Only if you have the viewport smaller than 600px. 600px was an example, obviously the OP would alter this to his specifications. – George Dec 18 '13 at 08:25
@oGeez it is not working. click on `part3` and your `#controls` is not visible. – codingrose Dec 18 '13 at 08:29
@Hiral See update. If the user wants the div to have its own scroll it's unlikely it'll ever be bigger than the view-port. – George Dec 18 '13 at 08:37

score 0 · Answer 2 · edited Dec 18 '13 at 08:23

0

I think what you want is position:fixed, like this:

#controls {
    float:right;
    position:fixed;
    right:0;
}

FIDDLE

edited Dec 18 '13 at 08:23

Vivek Vikranth

3,265
2
21
34

answered Dec 18 '13 at 08:19

Andrew

5,290
1
19
22

There might be more than that on the real page... – JNF Dec 18 '13 at 08:20

score -1 · Answer 3 · answered Dec 18 '13 at 08:36

-1

You need to set #container to

position: absolute;

and then use JS to control the style.top of the element

answered Dec 18 '13 at 08:36

gee

72
4

easiest way to achieve scrolling of content

Part1

Part2

Part3

3 Answers3