jquery - 帮助我使用 jScrollPane - JQUERY 插件

Question

我在 http://jscrollpane.kelvinluck.com/ 下载并使用 Jscrollpane但在我编辑我的 html 代码和 css 作为示例并根据我的情况进行自定义后，它不能很好地工作，它在这里不显示滚动条:

<script type="text/javascript">
    $(document).ready(function () {
        $('ul.menu-meal li .meal-content').jScrollPane({
            showArrows: true
        });
    });
</script>

这里是我的 html:

<ul class="menu-meal">
<li>
    <div class="meal-name">
        <img id="ctl00_ContentPlaceHolder1_Menu1_img_MealName_Breakfast" src="Images/MealName_Breakfast.png" style="border-width:0px;" />
    </div>

    <div class="meal-content">
        <h1>
            <span class="meal-title">BREAKFAST & LUNCH</span>
        </h1>
        <p class="meal-sub-title">
            BREAKFAST( FROM 7AM-10:30AM)
        </p>
        <p class="food">

            <span class="food-name">01.TRADITIONAL BEEF NOODLE SOUP</span> <span class="food-price">
                23.4</span>
        </p>
        <p class="food">
            <span class="food-name">02.RICE NOODLE SOUP WITH CRISPY SOFT SHELL CRAB AND LIME LEAVE</span>
            <span class="food-price">28.5</span>

        </p>
        <p class="food">
            <span class="food-name">03.RICE NOODLE SOUP WITH MUSHROOM AND SEAFOOD</span> <span
                class="food-price">22.8</span>
        </p>
        <p class="food">
            <span class="food-name">04.AMERICAN BREAFAST: CHOICE OF FRIED EGG OR OMELETE SERVED</span>
            <span class="food-price"></span>

        </p>           
    </div>
</li></ul>

这是我的 CSS 代码:

.main-content ul.menu-meal
{
    background-color: #dbd8d0;
    float: left;
    height: 800px;
    position: relative;
    overflow: hidden;
    width: 1160px;
}

ul.menu-meal li
{
    background-color: #dbd8d0;
    /*cursor: pointer;*/
    height: 800px;
    padding-right: 280px; 
    position: absolute;
    top: 0;
    width: 880px;
}

ul.menu-meal li div.meal-name
{
    float: left;
    background-color: #817d6d;
    height: 100%;
    width: 40px;
    position: relative;
    z-index: 20;
    text-align: center;
    vertical-align: middle;
}

ul.menu-meal li.active div.meal-name, ul.menu-meal li:hover div.meal-name
{
    background: url(../Images/Bg_Menu_Meal_Name.png) repeat-y left top;   
} 

div.meal-name img
{
    border: none;
    margin-top: 30px;
    text-align: center;
    vertical-align: middle;
}

ul.menu-meal li div.meal-content
{
    float: left;
    height: 740px;
    padding: 30px 30px 30px 80px;
    position: relative;
    width: 730px;
    overflow: auto;
}

div.meal-content h1
{
    float: left;
    width: 730px;
}

div.meal-content p.food, div.meal-content p.meal-sub-category
{
    float: left;
    font-size: 1em;
    margin: 5px 0 0 0;
    text-transform: uppercase;
    width: 700px;
}

div.meal-content p.food .food-name
{
    float: left;
    font-size: 0.9em;
    line-height: 18px;
    margin: 0;
    padding: 0;
    width: 600px;
    height: auto;
    text-transform: capitalize;
}

div.meal-content p.food .food-name b
{
    font-weight: normal;
    text-transform: uppercase;
}

div.meal-content p.food .food-price
{
    float: right;
    font-size: 0.9em;
    margin: 0;
    padding: 0;
    width: 50px;
    height: auto;
    margin-right: 40px;
}

请帮我使用它。在我使用它时，只显示 jspHorizo​​ntalBar, jspContainer, jspPane 。 jspContainer 中的 jspPane 但它没有包装我的内容，我的内容溢出 jspPane 区域，并且 jspVerticalBar 不显示，我想显示 jspVerticalBar 而不是 jspHorizo​​ntalBar。帮助我!

Answer 1

在容器上设置高度/最小高度(为了确认其工作原理，将此高度设置为小于元素)并尝试设置溢出:自动；或溢出:滚动；我现在不太记得了，而且你没有发布 jsfiddle :(