调整浏览器大小时,nicescroll栏不能正常工作

时间:2014-06-03 13:26:07

标签: jquery-plugins nicescroll

我正在使用nicescroll bar而且我的大部分工作基于此我现在得到一个非常奇怪的错误:

我有3个div和nicescroll已附加到第二个div。一切都好,直到它成为责任。为了显示内容,我需要将div放在彼此之上。当我调整浏览器的大小时,滚动条的栏会从它的实际位置开始(它应该坚持第二个div);您可以看到如下图像:

enter image description here

此外,我尝试创建小提琴链接但我找不到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 &quot;backend&quot; 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 &quot;backend&quot;. 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 &amp; 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 &quot;Print Using&quot;
            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
            &quot;Print Using&quot; 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 &quot;Device:&quot; 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>

任何人都可以帮助我吗?

0 个答案:

没有答案