需要幫助才能製作可滾動的div

Question

我想爲大型導航欄製作如下頁面中的可滾動div。這個導航欄將是次要的，並將花費直到頁面底部的標題和Primebar navbar.so後，如果我向下滾動頁面標題和導航欄會上去，這個div將有100vh。

https://developers.facebook.com/docs/graph-api/reference/user/likes

任何人都可以提供一個簡單的代碼 -

Answer 1

給予高度和寬度的div和設置溢出自動內容是否溢出尺寸會出現滾動條。

<div style="height:200px; width:200px;overflow:auto;"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit faucibus molestie. Nullam ultricies massa posuere blandit cursus. Nulla risus sem, dictum a tellus vitae, tempor vulputate ipsum. Fusce tincidunt finibus eros vitae egestas. Quisque hendrerit ultricies velit vitae pellentesque. Fusce gravida sagittis ipsum facilisis dictum. Aenean varius, felis ut pretium scelerisque, dolor sem euismod velit, quis facilisis lectus metus in felis. Pellentesque nisl turpis, pretium a velit in, iaculis ultricies neque. Proin ullamcorper gravida posuere.Duis sagittis augue sed malesuada convallis. Duis iaculis mattis lorem sed rutrum. Aenean eget erat quam. Praesent finibus eleifend arcu eget venenatis. Aliquam rutrum ex sem, vel tempus enim ultricies in. Fusce a risus ornare mi rutrum fringilla a in est. Nullam tristique vel arcu eu dapibus. Donec sit amet pulvinar quam.Integer consectetur feugiat ultricies. In eget nisl ac sem sollicitudin condimentum. Curabitur varius sed ligula eu porttitor. In semper id nisi sed ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc in convallis lorem, nec malesuada augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec neque eros, venenatis vitae lorem eget, malesuada mollis lorem. Mauris maximus neque felis, ac facilisis nulla efficitur et. Nulla interdum, nulla ultrices condimentum aliquet, massa erat varius augue, et congue lectus mi sed sapien. Aliquam scelerisque, dui eget molestie condimentum, ex elit sagittis est, vel cursus magna urna vitae arcu. Nam volutpat diam id diam ultrices pretium. Maecenas efficitur orci risus, vitae pharetra enim posuere eget.</p> 
</div> 

Answer 2

使用jquery的小示例，但必須根據需要進行更改。

var step = 250; 
 
var scrolling = false; 
 

 
// Wire up events for the 'scrollUp' link: 
 
$("#scrollUp").bind("click", function(event) { 
 
    event.preventDefault(); 
 
    // Animates the scrollTop property by the specified 
 
    // step. 
 
    $("#content").animate({ 
 
     scrollTop: "-=" + step + "px" 
 
    }); 
 
}) 
 

 

 
$("#scrollDown").bind("click", function(event) { 
 
    event.preventDefault(); 
 
    $("#content").animate({ 
 
     scrollTop: "+=" + step + "px" 
 
    }); 
 
}) 
 

 
function scrollContent(direction) { 
 
    var amount = (direction === "up" ? "-=1px" : "+=1px"); 
 
    $("#content").animate({ 
 
     scrollTop: amount 
 
    }, 1, function() { 
 
     if (scrolling) { 
 
      scrollContent(direction); 
 
     } 
 
    }); 
 
}

#content { 
 
    overflow:auto; 
 
    height: 100vh; /*could be whatever*/ 
 
    background: #e6e6e6; 
 
    width:160px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<a id="scrollUp" href="#">up</a> 
 
<a id="scrollDown" href="#">down</a> 
 

 
<div id="wrapper"> 
 
    <div id="content"> 
 
     
 
     <ul> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
      <li>some content here</li> 
 
     </ul> 
 
     
 
    </div> 
 
</div>