Published on: 18 July, 2013

How to create Scrolling Vertical Div using CSS

Posted by andy | 1493 views 0 likes 0 favourites 0 comments
Tumblr Digg Google Plus

This tutorial will show you how you can create a scrolling vertical div by using css only.

Firstly, you will need to create a div which is going to wrap the whole text. We named the div id to be called scroller

      
<div id="scroller">
    <p>Fringala congi facilisoe ameto doi lopiun idu gulio loi sagita comodi malesudi conviluis telei muis nibhue vitael dera sedoi matio fremen erati lorit ememper valio atic nune neci ultri impero inim quam mauri velpt a feloxi masie mekuai gravidue velo sito turipi ina iaculo timoi ete vali didaminia velizu ursiue ani menai egetsi telli famera dictio eua nequi solicto uloe moriol eto vuliputu pras ratrum duiso uto diami sceleris etui welz nuni palti sapio pele augue vezi sipoi timon gujial in nuni goi ticoduy menecoi at dalis geio ameto acio eupa dea aiculi enterdum curab nequel ameto curiosue duo turipo egeto dulia inhac donei ruti nisio dapibu molie uria tikoan</p>
        
    <p>Nulai sagita ruti solicto nisio velpt palvinor egetsi nune lorit pras ameito vitael augue duo sito vali malesudi fremen tuxi dea pharetu conviluis nuni eua ultrico ani pele vuliputu turipi moriol ticoduy curab didaminia sub at keumen velizu erati gulio dictio nibhue donio valio facilisoe fringala sedoi matio ememper liebeo menecoi ut aiculi carai mauriz ratrum loi neci curio acio doi tikoan scelosqui mekuai diami ameto gulao hatibo uria hacio nequel mauri atic dulia velo orai tismaei gravidue donei loroi sotpio ete telli risusu a muis turipo sito dignisa inhac sito ina feloxi velio solicito sipoi iaculo ultri ursiue scelerisu dalis enterdum geio plato nuni molie haoti curiosue sito comodi adipi gravido sondue dicti nequi eua gujial quam dera sceleris</p>
</div>

The next step is to include a css style, the main idea is you will need to specify the height and need to set the overflow-x to hidden. (which is the horizontal scrolling bar to be invisible), so the vertical scrolling bar will be visible instead. In this example, we specify the width as well, you can ignore the width if you want to.

	
#scroller{
    width:500px;
    height:300px;
    overflow-x:hidden;
}

Demo for Scrolling Div using CSS Only

Below is the quick demo on how it works.

Fringala congi facilisoe ameto doi lopiun idu gulio loi sagita comodi malesudi conviluis telei muis nibhue vitael dera sedoi matio fremen erati lorit ememper valio atic nune neci ultri impero inim quam mauri velpt a feloxi masie mekuai gravidue velo sito turipi ina iaculo timoi ete vali didaminia velizu ursiue ani menai egetsi telli famera dictio eua nequi solicto uloe moriol eto vuliputu pras ratrum duiso uto diami sceleris etui welz nuni palti sapio pele augue vezi sipoi timon gujial in nuni goi ticoduy menecoi at dalis geio ameto acio eupa dea aiculi enterdum curab nequel ameto curiosue duo turipo egeto dulia inhac donei ruti nisio dapibu molie uria tikoan

Nulai sagita ruti solicto nisio velpt palvinor egetsi nune lorit pras ameito vitael augue duo sito vali malesudi fremen tuxi dea pharetu conviluis nuni eua ultrico ani pele vuliputu turipi moriol ticoduy curab didaminia sub at keumen velizu erati gulio dictio nibhue donio valio facilisoe fringala sedoi matio ememper liebeo menecoi ut aiculi carai mauriz ratrum loi neci curio acio doi tikoan scelosqui mekuai diami ameto gulao hatibo uria hacio nequel mauri atic dulia velo orai tismaei gravidue donei loroi sotpio ete telli risusu a muis turipo sito dignisa inhac sito ina feloxi velio solicito sipoi iaculo ultri ursiue scelerisu dalis enterdum geio plato nuni molie haoti curiosue sito comodi adipi gravido sondue dicti nequi eua gujial quam dera sceleris

Download Demo Files

Click here to download the demo files

The next step is to include a css style, the main idea is you will need to specify the height and need to set the overflow-x to hidden. (which is the horizontal scrolling bar to be invisible), so the vertical scrolling bar will be visible instead. In this example, we specify the width as well, you can ignore the width if you want to.

	
#scroller{
    width:500px;
    height:300px;
    overflow-x:hidden;
}

Demo for Scrolling Div using CSS Only

Below is the quick demo on how it works.

Fringala congi facilisoe ameto doi lopiun idu gulio loi sagita comodi malesudi conviluis telei muis nibhue vitael dera sedoi matio fremen erati lorit ememper valio atic nune neci ultri impero inim quam mauri velpt a feloxi masie mekuai gravidue velo sito turipi ina iaculo timoi ete vali didaminia velizu ursiue ani menai egetsi telli famera dictio eua nequi solicto uloe moriol eto vuliputu pras ratrum duiso uto diami sceleris etui welz nuni palti sapio pele augue vezi sipoi timon gujial in nuni goi ticoduy menecoi at dalis geio ameto acio eupa dea aiculi enterdum curab nequel ameto curiosue duo turipo egeto dulia inhac donei ruti nisio dapibu molie uria tikoan

Nulai sagita ruti solicto nisio velpt palvinor egetsi nune lorit pras ameito vitael augue duo sito vali malesudi fremen tuxi dea pharetu conviluis nuni eua ultrico ani pele vuliputu turipi moriol ticoduy curab didaminia sub at keumen velizu erati gulio dictio nibhue donio valio facilisoe fringala sedoi matio ememper liebeo menecoi ut aiculi carai mauriz ratrum loi neci curio acio doi tikoan scelosqui mekuai diami ameto gulao hatibo uria hacio nequel mauri atic dulia velo orai tismaei gravidue donei loroi sotpio ete telli risusu a muis turipo sito dignisa inhac sito ina feloxi velio solicito sipoi iaculo ultri ursiue scelerisu dalis enterdum geio plato nuni molie haoti curiosue sito comodi adipi gravido sondue dicti nequi eua gujial quam dera sceleris

Download Demo Files

Click here to download the demo files

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 20 May, 2016
Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.
Published on: 31 January, 2016
The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.
Related Tutorials
Published on: 10 August, 2013
z-index is a css property that allows to position an object/element in front/behind of other elements.