Question

我想制作一个可滚动的div，如下页所示，适用于大型导航栏。这个导航栏将是二次，并将在标题和primery navbar之后延伸到页面的底部。如果我向下滚动页面标题和导航栏将上升，这个div将有100vh。

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

任何人都可以提供简单的代码吗？ -

Answer 1

给div增加高度和宽度并将overflow设置为auto如果内容溢出尺寸，则会出现滚动条。

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

需要帮助来制作一个可滚动的div

2 个答案: