幫我用JScrollPane中 - jQuery插件

我下載並http://jscrollpane.kelvinluck.com/使用JScrollPane的，但之後我DIT我的HTML代碼和CSS的例子與我的情況適合定製它不能正常工作，它不顯示滾動條的位置：幫我用JScrollPane中 - jQuery插件

<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; 
}

請幫我使用它。在我使用它時只顯示jspHorizontalBar，jspContainer，jspPane。 jspPane在jspContainer中，但它不包裹我的內容，我的內容溢出了jspPane區域，而jspVerticalBar不顯示，我想要顯示jspVerticalBar而不是jspHorizontalBar。幫我！

來源

2011-03-31 NevenHuynh

請提供一個鏈接到您的網頁（或您的網頁http://jsfiddle.net） - 這將使它更容易有人幫助你調試... – vitch 2011-04-03 09:26:46

你的代碼讓我很餓 – Joe 2011-07-25 19:15:34

在容器上設置高度/最小高度（以確認其工作狀態，將此高度設置得小一些），並嘗試設置溢出：auto;或溢出：滾動;我不記得現在，你沒有發佈jsfiddle：（

來源

2011-08-05 18:52:39 braindamage

幫我用JScrollPane中 - jQuery插件

回答

相關問題