Jak zrobić przewijanie w pionie div

Question

Zrobiłem poziome przewijanie z listą elementów obrazu. Ale kiedy zrobiłem przewinięcie w pionie, nie udało mi się tego zrobić.

mój kod na poziomej zmieniacza jest

<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> 

css użyłem jest następujący

.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; 
} 

proszę kierować mi się znaleźć rozwiązanie, aby dokonać tego poziomego przewijania div do przewijania pionowego

Answer 1

pomocą css poniżej

pic-container { 
    width: 50px; 
    height: 200px; 
    overflow-y: scroll; 
    overflow-x:hidden; 
} 

zobaczyć na skrzypcach link HERE

Answer 2

musisz ustawić wysokość stałego głównego div dla poziomego przewijania i jeśli twoja wewnętrzna wysokość zawartości przekroczy wysokość głównego div, pojawi się poziomy przewijany.

.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>

Answer 3

Spróbuj tego:

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>