Question

所以我正在制作闲置点击游戏。对于你可以购买的所有东西，我想把它们放在自己的盒子里。基本上，您不必向下滚动整个页面，只需在自己的小框中向下滚动即可。我如何将代码放在这样的盒子里？基本上它就像炊具点击器右侧的盒子，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*/
}

把东西放在自己的滚动框中

1 个答案: