Панель прокрутки не работает хорошо при изменении размера браузера
Я использую nicescroll bar, и большую часть своей работы я основываю на этом, теперь я получаю очень странную ошибку:
У меня есть 3 div и nicescroll был прикреплен ко второму div. все в порядке, пока не доходит до отзывчивости. для показа контента мне нужно поместить div друг на друга. когда я изменяю размер браузера, полоса прокрутки уходит от ее реальной позиции (она должна придерживаться второго div); Вы можете увидеть изображение следующим образом:
Также я попытался создать ссылку fiddle, но не смог найти внешнюю ссылку 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>
Может кто-нибудь мне помочь?