スクロール可能なdivを作成するためのヘルプが必要

Question

次のページのようにスクロール可能なdivを作成したい場合は、大きなnavbarを使用します。このnavbarはセカンドリーになり、タイトルとプリミティブnavbar.soの後にページの一番下まで消費します。タイトルを下にスクロールするとnavbarが上がり、このdivは100vhになります。

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

誰もが簡単なコードを提供することができます - ？

Answer 1

を内容は寸法をオーバーフロー場合は、スクロールバーが表示されますautoに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>