把東西放在自己的滾動框中

Question

所以我正在做一個空閒的點擊遊戲。對於所有可以購買的東西，我想把它們放在自己的盒子裏。基本上，不必向下滾動整個頁面，只需在自己的小盒子中向下滾動即可。我將如何把代碼放在這樣的盒子裏？基本上，它就像cooike clicker右側的方框，yopu可以滾動瀏覽所有可以使用的東西，但不會滾動實際頁面。就像一個窗口內的窗口http://jsfiddle.net/blosche/nHPMx/30/ 我想把這個文本放到窗口裏面的窗口中，你可以向下滾動，所以它不佔用太多空間。

<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_MomObject_zps20d68d83.png" alt="mom" /> 
<button style="background-color:Purple; color:red; border:red; font-size:15px;" type="button" onclick="buyMom()">Buy 1 mom</button> 
<p>Moms:+1 animals per second 
    <br>(Makes baby animals with mom powers)</p> 
<div id="momCount">0</div> 
<div id="momPrice">50</div> 
<br> 
<p>================================</p> 
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Incuobject_zpsee0cee76.png" alt="Incubator" /> 
<button style="background-color:lightcoral; color:purple; border:red; font-size:15px;" type="button" onclick="buyIncu()">Buy 1 incubator</button> 
<p>Incubator:+10 animals per second 
    <br>(Just the right growing conditions)</p> 
<div id="incuCount">0</div> 
<div id="incuPrice">150</div> 
<br> 
<p>================================</p> 
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Farmobject_zps29b6cd87.png" alt="Farm" /> 
<button style="background-color:red; color:purple; border:red; font-size:15px;" type="button" onclick="buyFarm()">Buy 1 farm</button> 
<p>Farms:+50 animals per second 
    <br>(More room for more reproduction!)</p> 
<div id="farmCount">0</div> 
<div id="farmPrice">500</div> 
<br> 
<p>================================</p> 
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Factoryobject_zps8aa2f150.png" alt="factory" /> 
<button style="background-color:yellow; color:blue; border:red; font-size:15px;" type="button" onclick="buyFactory()">Buy 1 factory</button> 
<p>Factorys:+100 animals per second 
    <br>(Genetic baby animals!)</p> 
<div id="factoryCount">0</div> 
<div id="factoryPrice">1000</div> 
<br> 



<p>================================</p> 
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Clonreobject_zps0f89c829.png" alt="Cloner" /> 
<button style="background-color:orange; color:red; border:red; font-size:15px;" type="button" onclick="buyClone()">Buy 1 cloner</button> 
<p>Cloners:+500 animals per second 
    <br>(Cloning babys in the clone-o-matic)</p> 
<div id="cloneCount">0</div> 
<div id="clonePrice">2000</div> 
<br> 
<p>================================</p> 
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Dnaobject_zps32b2a5e4.png" alt="Dna" /> 
<button style="background-color:lime; color:black; border:red; font-size:15px;" type="button" onclick="buyDna()">Buy 1 Dna Changer</button> 
<p>Dna Changer:+800 animals per second 
    <br>(Changing pesky humans into animals!)</p> 
<div id="dnaCount">0</div> 
<div id="dnaPrice">8000</div> 
<br> 



<p>================================</p> 
<img src="http://i788.photobucket.com/albums/yy168/Boone_Losche/th_Animalfarm_zps5c2bc06a.png" alt="Af" /> 
<button style="background-color:red; color:yellow; border:red; font-size:15px;" type="button" onclick="buyAf()">Invoke AиIMAL FAяM</button> 
<p>Protocol ANIMAL FAяM:+2000 animals per second comrade 
    <br>(four legs not two)</p> 
<div id="afCount">0</div> 
<div id="afPrice">15000</div> 
<br> 

<p>================================</p> 

Answer 1

要創建一個嵌入框架，請在任何需要的位置放置一個div，並將溢出設置爲auto。這就像一個迷你的可滾動窗口。

設置HTML：

<div id = "frameright"> 
<p>Your Stuff</p> 
</div> 

的CSS：

#frameright { 
position:absolute; 
top:0px; 
left:400px; /*Change the position*/ 
width:250px; /*Width of right frame div*/ 
overflow:auto; /*Lets you scroll*/ 
}