CODEWITHSUNDEEP
css
Mikk
Mikk

Reputation: 455

Disable the scroll function of a page

There are 3 divs, side by side to each other.

so div1 div2 div3

Is there a way to focus the scroll only on div2? so that the contents of div1 and div3 is always seen while the user 'scrolls' only on div2?

Preferably a css solution if possible. If not, what solutions are possible?

Upvotes: 0

Views: 114

Answers (5)

Matt Saunders
Matt Saunders

Reputation: 4371

hmm do you mean so div1 and div3 are fixed on the page, meaning that when you scroll only div2 is scrolled? if so, something like

HTML

<div class="container">
    <div class="div-one"></div>
    <div class="div-two"></div>
    <div class="div-thee"></div>
</div>

CSS

.container { position: relative; }
.div-one, .div-two { position: fixed; }

This won't work right off the bat but you get the idea.

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

You could fix the position of the first and last div, so only the center div will scroll;

HTML

<div class="l">left</div>
<div class="m">middle</div>
<div class="r">right</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.l, .r {
    width: 33%;
    height: 100%;
    position: fixed;
    background: lightgreen;
    top: 0;
}
.l { left: 0; }
.r { right: 0; }
.m {
    margin: 0 33%;
    min-height: 100%;
    background: lightblue;
}

Also check this JSFiddle.

Upvotes: 0

Martijn
Martijn

Reputation: 16103

You could use the position: fixed in css. My solution makes the body scrollable. If one would refresh the page, it would hop back to where they were, not sure if the overflow-method does that. Also, this allows you to user anchors to parts of you content (<a href="#someId"></a>)

This is a quick draft:

<div id="divWrap">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
</div>

.

/* This wrapper places content centered in the page, the relative is important */
#divWrap{
    position: relative;
    margin: 0 auto;
    width: 500px;
}
/* Place this one fixed, top, left */
#div1{
    position: fixed;
    left: 0;
    top: 0;
    width: 100px;
}
/* This div acts normal */   
#div2{
    margin: 0 100px 0 200px; /* margins => the widths of 1 & 2 */
    width: 200px;
}
/* Place this one fixed, top, right */
#div3{
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
}

Upvotes: 0

Patsy Issa
Patsy Issa

Reputation: 11293

Add the following css:

body, #div1, #div3
{
 overflow:hidden;
}
#div2
{
 overflow-y:scroll;
}

Note that you need to set a width and height to the elements, and anything that goes outside of the width and height of div1,div3 and the body won't be shown, while in div2 it will be scrollable.

Upvotes: 1

Leo T Abraham
Leo T Abraham

Reputation: 2437

#div1, #div3
{
overflow: hidden;
}

#div2
{
overflow:scroll;
}

If you want to hide horizontal scroll use: overflow-x:hidden and for vertical use overflow-y:hidden

Upvotes: 1

Related Questions