How to make a div vertically scrollable
Solution 1
Use the css below
.pic-container {
width: 50px;
height: 200px;
overflow-y: scroll;
overflow-x:hidden;
}
EDIT :- Added a '.' before the class name see the fiddle link HERE
Solution 2
Try this:
index.html:
.pic-container {
width: 600px;
height: 600px;
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="pic-container">
<a href="writeA.html"><img src="images/A.png" /></a>
<a href="writeB.html"><img src="images/B.png" /></a>
<a href="writeC.html"><img src="images/C.png" /></a>
<a href="writeD.html"><img src="images/D.png" /></a>
<a href="writeE.html"><img src="images/E.png" /></a>
</div>
</body>
</html>
Solution 3
you have to set fix height of your main div for horizontal scroll and if your inside content height exceed height of main div then horizontal scroll will come.
.pic-container {
width: 1350px;
margin: 0 auto;
white-space: nowrap;
}
.pic-row {
/* As wide as it needs to be */
width: 1350px;
height: 400px;
overflow: auto;
}
.pic-row a {
clear: left;
display: block;
}
<div class="pic-container">
<div class="pic-row">
<a href="writeA.html"><img src="images/A.Png" /></a>
<a href="writeB.html"><img src="images/B.Png" /></a>
<a href="writeC.html"><img src="images/C.Png" /></a>
<a href="writeD.html"><img src="images/D.Png" /></a>
<a href="writeE.html"><img src="images/E.Png" /></a>
<a href="writeF.html"><img src="images/F.Png" /></a>
<a href="writeG.html"><img src="images/G.Png" /></a>
<a href="writeH.html"><img src="images/H.Png" /></a>
<a href="writeI.html"><img src="images/I.Png" /></a>
<a href="writeJ.html"><img src="images/J.Png" /></a>
<a href="writeK.html"><img src="images/K.Png" /></a>
<a href="writeL.html"><img src="images/L.Png" /></a>
<a href="writeM.html"><img src="images/M.Png" /></a>
<a href="writeN.html"><img src="images/N.Png" /></a>
<a href="writeO.html"><img src="images/O.Png" /></a>
<a href="writeP.html"><img src="images/P.Png" /></a>
<a href="writeQ.html"><img src="images/Q.Png" /></a>
<a href="writeR.html"><img src="images/R.Png" /></a>
<a href="writeS.html"><img src="images/S.Png" /></a>
<a href="writeT.html"><img src="images/T.Png" /></a>
<a href="writeU.html"><img src="images/U.Png" /></a>
<a href="writeV.html"><img src="images/V.Png" /></a>
<a href="writeW.html"><img src="images/W.Png" /></a>
<a href="writeX.html"><img src="images/X.Png" /></a>
<a href="writeY.html"><img src="images/Y.Png" /></a>
<a href="writeZ.html"><img src="images/Z.Png" /></a>
</div>
</div>
Related videos on Youtube
Milap
Looking for learning videos on CSS3, Advance JavaScript, WordPress and many more? You won't regret checking out my YouTube channel : https://www.youtube.com/c/CodeCanvas/ Please subscribe ☝️ Playlists : JavaScript Basics & Advance Concepts WordPress Concepts CSS Selectors JavaScript Code & Tricks JavaScript basic - Exercises, Practice, Solution HTML & HTML5 Tutorials Read : Making a div vertically scrollable using CSS You can reach me : Skype : milap_for_skype Gmail : [email protected] Facebook : http://facebook.com/milap112 Here is my blog : http://patelmilap.wordpress.com I have contributed to WordPress community with my plugin with more then 12,80,000 downloads and 100000 + active installs. https://wordpress.org/plugins/facebook-pagelike-widget/
Updated on January 10, 2020Comments
-
Milap over 4 years
I made a horizontal scroll with a list of picture elements.. But when I made to scroll it vertically I failed to do it.
my code for the horizontal scroller is
<div class="pic-container" style="position:absolute; left: 3px; top: 102px;"> <div class="pic-row"> <div id="divd" style="width: 1680px;"> <a href="writeA.html"><img src="images/A.Png" /></a> <a href="writeB.html"><img src="images/B.Png" /></a> <a href="writeC.html"><img src="images/C.Png" /></a> <a href="writeD.html"><img src="images/D.Png" /></a> <a href="writeE.html"><img src="images/E.Png" /></a> <a href="writeF.html"><img src="images/F.Png" /></a> <a href="writeG.html"><img src="images/G.Png" /></a> <a href="writeH.html"><img src="images/H.Png" /></a> <a href="writeI.html"><img src="images/I.Png" /></a> <a href="writeJ.html"><img src="images/J.Png" /></a> <a href="writeK.html"><img src="images/K.Png" /></a> <a href="writeL.html"><img src="images/L.Png" /></a> <a href="writeM.html"><img src="images/M.Png" /></a> <a href="writeN.html"><img src="images/N.Png" /></a> <a href="writeO.html"><img src="images/O.Png" /></a> <a href="writeP.html"><img src="images/P.Png" /></a> <a href="writeQ.html"><img src="images/Q.Png" /></a> <a href="writeR.html"><img src="images/R.Png" /></a> <a href="writeS.html"><img src="images/S.Png" /></a> <a href="writeT.html"><img src="images/T.Png" /></a> <a href="writeU.html"><img src="images/U.Png" /></a> <a href="writeV.html"><img src="images/V.Png" /></a> <a href="writeW.html"><img src="images/W.Png" /></a> <a href="writeX.html"><img src="images/X.Png" /></a> <a href="writeY.html"><img src="images/Y.Png" /></a> <a href="writeZ.html"><img src="images/Z.Png" /></a> </div>
The css I used is as follows
.pic - container { /* The width of mydocument */ width: 1350 px; margin: 0 auto; white - space: nowrap; overflow - x: inherit; overflow - y: hidden; - ms - overflow - style: -ms - autohiding - scrollbar; } .pic - row { /* As wide as it needs to be */ width: 1527 px; }
Please Guide me to found a solution to make that horizontal scrolling div into vertical scrolling
-
shennan over 10 years
.pic-container{ overflow-x:scroll; }
-
-
Admin over 10 yearsthanks. but I did it by setting the height. the result is the same getting horizontal scroll bar but I want the pictures to scroll vertically.. can you clearly explain it by the code which I provided in my question
-
Admin over 10 yearsI want vertical scrolling but you told for horizontal scrolling
-
Adelmar over 10 yearsTo get something working with the markup you provided, just set "height: 700px;", "overflow-y: scroll;", and remove "white-space: nowrap;".
-
Ankit Agrawal over 10 yearsi change my answer please use that css and html, i hope it will help you