0

I have a website, which have a DIV containing contents that requires scrolling within, using overflow: auto.

<div class="product_list">
    <ul class="col">
        <li>Product A - Long Long Name</li>
        <li>Product A - Long Long Name</li>
        <li>Product A - Long Long Name</li>
        <li>Product A - Long Long Name</li>
        <li>Product A - Long Long Name</li>
        <li>Product A - Long Long Name</li>
        <li>Product A - Long Long Name</li>
        <li>Product A - Long Long Name</li>
        <li>Product A - Long Long Name</li>
        <li>Product A - Long Long Name</li>
        <li>Product A - Long Long Name</li>
        <li>Product A - Long Long Name</li>
    </ul>
</div>

CSS:

.wrapper .product_list {
    float: left;
    width: 700px;
    overflow-y: auto;
}
.wrapper .product_list ul {
    margin-bottom: 20px;
    overflow: hidden;
    height: 300px;
}
.wrapper .product_list li {
    font-family: Arial, sans-serif;
    display: inline;
    float: left;
    line-height: 2.5em;
    margin-right: 55px;
    width: 45%;
}

jQuery NiceScroll is installed to .product_list as follow:

$(document).ready(function() {
    $('.product_list').niceScroll({cursorcolor:"#FF0000", cursoropacitymax: 0.5, cursorwidth: 7});
});

However, the .product_list cannot be scrolled until I drag the contents in the .product_list. What would cause the problem?

Live site: http://www.on-ce.com.hk/dev/ (click the top menu "Our Products", the .product_list will show)

p.s. NiceScroll adds tabindex="5005" style="overflow: hidden; outline: none;" to .product_list.

Raptor
  • 53,206
  • 45
  • 230
  • 366
  • I am not sure but can you try adding this code too: `$(".product_list").getNiceScroll().onResize();` – Imran Bughio Aug 25 '15 at 11:28
  • could you create a jsfiddle for the same, http://jsfiddle.net – dreamweiver Aug 25 '15 at 11:42
  • @dreamweiver I tried. i wish i can reproduce the same thing is JSFiddle. However, it clashes with JSFiddle's JS... – Raptor Aug 26 '15 at 02:04
  • @ImranBughio I tried, `$(".product_list").getNiceScroll().resize()` (yeah, the function should be `resize()`). After calling this, the scrollbar ends up moving to incorrect position. – Raptor Aug 26 '15 at 02:06
  • hmm, hard to understand what your saying without jsfiddle. got any alternative ? – dreamweiver Aug 26 '15 at 05:48

0 Answers0