как добавить полосы прокрутки в неподвижной емкости

Question

Я хочу, чтобы добавить полосу прокрутки в неподвижном контейнере корзины продуктов, так что, когда я буду добавлять слишком много продуктов в корзине, я могу увидеть его легко с помощью прокрутки вниз продуктов в контейнере

Вот HTML код контейнера

?> 
    <div class="right_nav" > 
     <div class="right_nav_top"> 
      Your Cart 
     </div> 
     <hr width="130px"> 

     <table width="167" border="0" cellpadding="0" cellspacing="0" style="font-size:12px; margin:5px; overflow:auto"> 
<?php 

//iterate through the cart, the $product_id is the key and $quantity is the value 

foreach($_SESSION['cart'] as $product_id => $quantity) { 

//get the name, description and price from the database - 
//this will depend on your database implementation. 
//use sprintf to make sure that $product_id is inserted into the query as a number - 
//to prevent SQL injection 

$sql = sprintf("SELECT 
    event_title, 
    event_desc, 
    price 
    FROM events 
    WHERE id = %d;", 
    $product_id); 

$result = mysql_query($sql); 

//Only display the row if there is a product 
//(though there should always be as we have already checked) 

if(mysql_num_rows($result) > 0) { 

list($name, $description, $price) = mysql_fetch_row($result); 

$line_cost = $price * $quantity; //work out the line cost 
$totals = $total + $line_cost; //add to the total cost 

?> 

<tr> 
    <td colspan="3"><?php echo $name;?></td> 
</tr> 
<tr> 
    <td width="31"><?php echo $quantity;?>x</td> 
    <td width="59">&pound<?php echo $line_cost?></td> 
    <td width="70"> 
     <a href="<?php Site_titte();?>/viewcart.php?action=add&id=<?php echo $product_id;?>" title="Add"> 
      <img src="<?php Site_titte();?>/images/addred.png" width="24" height="24" border="none"> 
     </a> 
     <a href="<?php Site_titte();?>/viewcart.php?action=remove&id=<?php echo $product_id;?>" title="Remove"> 
      <img style="margin-bottom:6px;" src="<?php Site_titte();?>/images/icon_close.png" border="none"></a></td> 
</tr> 

<?php }}?> 

</table> 

<?php 

if(!isset($_SESSION['uid'])) 
    {$link="login.php";} 
else 
    {$link=Site_titte()."/order.php";} 
        ?> 
<hr width="130px"> 
    <div class="total_main"> 
     <div class="total_p1">Total</div> 
     <div class="total_p2">&pound<?php echo $total ?></div> 
     <div class="clearfix"></div> 
    </div> 
    <br> 
    <center> 
     <a href="<?php echo $link;?>"> 
      <img src="<?php Site_titte();?>/images/btn_order.png" border="none" width="140" height="38"> 
     </a> 
    </center> 
</div> 

<?php 

    } 
else { 

?>   

<div class="right_nav2"> 
    <div class="right_nav_top2"> 
     Your Cart 
    </div> 
    <hr width="130px"> 
     <table border="0" cellpadding="0" cellspacing="5" style="font-size:14px; margin:5px;">  
      <tr> 
       <td colspan="3">Your cart is empty.</td> 
      </tr> 

</table> 

и это код CSS

.right_nav2{ 
    position: fixed; 
    bottom: 0px; 
    right: 0; 
    top:220px; 
    margin: 0 10px 10px 0; 
    border: #DBDBDB 1px solid; 
    border-radius: 5px; 
    background-color:#fff; 
    height:150px; 
    width:150px; } 

.right_nav_top2{ 
    position:relative; 
    background:url(images/icon_cart_small.png) right no-repeat; 
    color:#214200; 
    margin: 12px; 
    font-size: 19px; } 

.right_nav{ 
    position: fixed; 
    right: 0; 
    top:220px; 
    border: #DBDBDB 1px solid; 
    border-radius: 5px; 
    background-color:#fff; 
    style="max-height: 552px;; 
    width:150px; } 

.right_nav_top{ 
    position:relative; 
    background:url(images/icon_cart_small.png) right no-repeat; 
    color:#214200; 
    margin: 12px; 
    font-size: 19px;} 

.total_main{ 
    position:relative; 
    background:#dbdbdb; 
    font-size: 14px;} 

.total_p1{ 
    position:relative; 
    float:left; 
    margin: 5px 11px 5px 12px;} 
.total_p2{ 
    position:relative; 
    float:left; 
    margin: 5px 11px 5px 0px;} 

Пожалуйста, помогите мне, где я должен править, чтобы добавить полосу прокрутки в этом контейнере

Answer 1

Вы можете добавить overflow-y или overflow-x для достижения этого в зависимости от того, в каком направлении вы хотите прокручивать. Я предполагаю, что вы хотите прокручивать вверх и вниз. Поэтому, когда ваш div увеличивается в контенте (продуктах) за его пределами, для div будет отображаться полоса прокрутки. Смотрите пример ниже:

Пример:

<!-- Scroll bar present but disabled --> 
    <div style="width: 200px; height: 100px; overflow-y: scroll;"> 
     test 
     </div> 
    <!-- Scroll bar present and enabled -->   
     <div style="width: 200px; height: 100px; overflow-y: scroll;"> 
     test<br /> 
     test<br /> 
     test<br /> 
     test<br /> 
     test<br /> 
     test<br /> 
     test<br /> 
     test<br /> 
     test<br /> 
     test<br /> 
     </div> 

Answer 2

добавить

overflow:scroll 

к элементу вы хотите иметь полосу прокрутки.