我正在使用nicescroll bar而且我的大部分工作基于此我现在得到一个非常奇怪的错误:
我有3个div和nicescroll已附加到第二个div。一切都好,直到它成为责任。为了显示内容,我需要将div放在彼此之上。当我调整浏览器的大小时,滚动条的栏会从它的实际位置开始(它应该坚持第二个div);您可以看到如下图像:
此外,我尝试创建小提琴链接但我找不到nicescrollbar的外部链接,顺便说一下我的代码如下:
的CSS:
#boxscroll {
height:220px;
width: 30%;
border: 2px solid #00F;
float:left;
}
.parent{
width: 100%;
height: 220px;
overflow: hidden;
float:left;
}
#test {
height:220px;
width: 60%;
border: 2px solid #00F;
float:left;
background-color:blue;
}
@media Screen and (max-width:1000px){
#boxscroll {
width:90%;
float: left;
height:100px;
border: 2px solid #00F;
}
.parent{
width: 100%;
height: 220px;
overflow: scroll;
}
#test
{
height:220px;
width: 95%;
border: 2px solid #00F;
float:left;
background-color:blue;
}
使用Javascript:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.nicescroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#boxscroll").height(220);
$("#boxscroll").niceScroll({
touchbehavior : false,
cursorcolor : "#00F",
cursoropacitymax : 0.7,
cursorwidth : 6,
background : "#ccc",
autohidemode : true
});
});
HTML:
<body>
<div class="parent">
<div id="test"></div>
<div id="boxscroll">
THIS IS A SIMPLE SCROLLABLE DIV
<h2>Package Description</h2>
<p>Release Date: August 10, 2010</p>
<p>
The <a
title="http://www.openprinting.org/show_driver.cgi?driver=hpijs"
rel="nofollow"
href="http://www.openprinting.org/show_driver.cgi?driver=hpijs">HPIJS</a>
driver is the free, <a
title="http://hplipopensource.com/hplip-web/index.html"
rel="nofollow"
href="http://hplipopensource.com/hplip-web/index.html">open-source
driver</a> issued by HP for their DeskJet and LaserJet printers. For
most <a title=""
href="http://www.linuxfoundation.org/collaborate/workgroups/openprinting/macosx/hpijs#Printers">supported
printers</a>, this driver produces output quality equivalent to the
proprietary HP drivers. In photo mode, with photo paper, the output
quality is very high, especially for the HP DeskJet 990C and later
models, which auto-detect the paper type in hardware. Photo printing
is fully supported in the newer 6- and 7-ink models.
</p>
<p>A major advantage of using this driver over those supplied by
HP is the direct interface between HPIJS and the native CUPS
spooler, which allows printing from any printer over any available
connection such as USB, AppleTalk, TCP/IP (via LPD and IPP), HP
JetDirect, and shared windows printers via SAMBA. Additionally, this
driver utilizes the existing Mac OS X USB "backend" and
thus does not install any software that might interfere with
standard USB operation.</p>
<p>Please note:</p>
<form id="form1" name="form1" method="post" action="">
<p>
<input type="text" name="a" id="a" /> <input name="" type="button"
onclick="this.value+=1" value="1" /> <input name=""
type="checkbox" value="1" /> <select name="">
<option>- 1 -</option>
<option>- 2 -</option>
<option>- 3 -</option>
<option>- 4 -</option>
</select>
</p>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</form>
<ul>
<li>HP does not provide any support for HPLIP or HPIJS on the
Mac OS X platform.</li>
<li><a
href="http://www.linuxfoundation.org/en/OpenPrinting/MacOSX/hpijs-USB">Several
HP USB devices</a> may not print successfully over the standard Mac OS
X USB "backend". Please <a
href="http://www.linuxfoundation.org/en/OpenPrinting/MacOSX/hpijs-USB">see
this note</a> for more information.</li>
</ul>
<h2>Release Notes</h2>
<ul>
<li>This release fixes a problem with the PPDs that caused many
job options such as page orientation, color/grayscale mode, duplex
printing, etc. to fail.</li>
<li>HPIJS is HP's universal printer driver for most of their
non-PostScript printers. It comes as a part of HPLIP, HP Linux
Imaging and Printing.</li>
<li>The PPDs for HP printers are now sourced from the HPLIP
package rather than the OpenPrinting.org database.</li>
<li>PPDs for printers from other manufacturers are provided by
OpenPrinting.org.</li>
<li>Some printers are only partially supported. Printers such
as<br /> HP LaserJet 1022<br /> HP LaserJet p1505n<br /> HP
LaserJet p12014<br /> HP LaserJet p2035<br /> require a
proprietary plug-in for full support. This package does not contain
or support such plug-ins.
</li>
</ul>
<p>
<a name="Printer_Set_Up_Instructions"
id="Printer_Set_Up_Instructions"></a>
</p>
<h2>Printer Set Up Instructions</h2>
<p>To add a printer queue, Leopard (Mac OS X 10.5.x) users should
use the Print & Fax from System Preferences. Click on the +
(plus) icon at the lower left. A new window will open. In that
window, click the Default Browser icon at the top left. Highlight
your printer in the section below. Use the "Print Using"
pop-up menu near the bottom of the window to select the correct PPD
for your printer and click Add.</p>
<p>Tiger users should open the Printer Setup Utility and click on
the Add icon at the top of the Printer List window. A new window
will open. In that window, click the Default Browser icon at the top
left. Highlight your printer in the section below. Use the
"Print Using" pop-up menu near the bottom of the window to
select the correct PPD for your printer and click Add.</p>
<p>Jaguar (OS X 10.2.x) and Panther (OS X 10.3.x) users should
open Print Center (Jaguar) or Printer Setup Utility (Panther), hold
down the Option key, and click the Add Printer button in the Print
Center toolbar. Within the setup sheet, choose Advanced from the top
popup menu; then in the "Device:" popup menu select your
printer by name (it should be the last item in the menu list).
Finally, select the correct PPD from the model browser and click
Add.</p>
</div>
<div
style="height: 400px; background-color: black; width: 90%; overflow: hidden; float: left;"></div>
</div>
任何人都可以帮助我吗?