创建一个侧边栏的滚动条(create a scroll bar in a sidebar)

2019-09-16 11:14发布

站内文章 / 前端开发
12 0 0

我试图创建一个滚动条#main DIV中，这样我可以滚动无需滚动页面或标题，但它不工作。 我在想什么？

我的代码如下：

CSS 

#topbar {
    height: 40px;
    background-color: blue;
}

#sidebar {
    position: absolute;
    top: 40px;
    bottom: 0px;
    width: 80px;
    overflow: hidden;   
}

#title {
    height:30px;
    background-color: red;
}

#main {
    height: auto;
    overflow: scroll;
}

HTML 

<div id="topbar">
    hello
</div>
<div id="sidebar">
    <div id="title">
        title
    </div>
    <div id="main">
        <!-- lots and lots of text-->
    </div>
</div>

你可以在这里找到一个例子的jsfiddle： http://jsfiddle.net/PTRCr/

谢谢

Answer 1:

你仍然在这个项目上我看到的。 还有很多答案，但我看到没有人取得了什么，我想你问的工作示例。

这里有一个工作的例子，（我希望）做什么，我想你问的。

我添加的内容移位包装，以便高度仍可以是100％。 你可以阅读更多关于该技术这个答案 。 我也删除了所有的绝对定位，我看不出有什么理由你应该这样做。

每个包装调整为以前的内容，先用高度40像素的顶栏，然后用30像素的称号。

这个例子也应该按照以前的规格，在调整大小时滚动条将保持在相同的基线。

正如你所看到的，通过下面的代码， 就可以做一个CSS不管别人怎么导致您认为唯一的解决办法 。 它只是需要一点技巧，从CSS持有的袋子。

男人，我这样一个白痴。

例如 | 码

HTML 

<div id='container'>
    <div id="top-bar">hello</div>
    <div class="wrapper">
        <div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div><div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div><div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div><div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div>
    </div>
</div>

CSS 

body, html{
    height:100%;
    width: 100%;
    line-height: 100%;
    margin: 0;          /* Normalization */
    padding: 0;         /* Normalization */
}

div{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#container{
    height:100%;
    width: 100%;
    text-align: center;
    overflow: auto;
}

#top-bar{
    height: 40px;
    line-height: 40px;
    border: 1px solid lightblue;
    background: blue;
    color: white;
    text-align: center;
}

.side-bar {
    width: 120px;
    height: 100%;
    text-align: center;
    color: white;
    border: 1px solid DarkOrchid;
    display: inline-block;
    vertical-align: top;
}

.title {
    height:30px;
    line-height: 30px;
    border: 1px solid salmon;
    background: red;
}

.wrapper{
    margin-top: -40px;
    padding-top: 40px;
    height: 100%;
    width: 100%;

    white-space: nowrap;
}

.wrapper > div{
    white-space: normal;
}

.content_wrapper{
    margin-top: -30px;
    padding-top: 30px;
    height: 100%;
}

.content{
    color: black;
    height: 100%;
    overflow: auto;
}


Answer 2:

元素你想成为滚动的，应

  • 已经定义的高度和宽度
  • 有属性overflow:auto

例： 

.scrollArea {
 width: 275px;
 height: 100px;
 padding-left: 5px;
 padding-right: 5px;
 border-color: #6699CC;
 border-width: 1px;
 border-style: solid;
 float: left;
 overflow: auto;
}


Answer 3:

CSS样式表是其唯一目的是风格文件。 他们无法调查预先存在的元素。

唯一的办法是div的大小是否是固定的，或者你必须使用JavaScript来找出确切高度。 其中，这可以用CSS来实现的方式已经被其他用户提出的。

所以，这里是你可以做使用jQuery的方式

$("#main").height($(document).innerHeight()-$("#title").outerHeight() - $("#topBar").outerHeight());

演示



Answer 4:

你的情况改变CSS： 

#sidebar {
position: absolute;
top: 40px;
bottom: 40px;
width: 80px;
overflow: scroll;   
}


Answer 5:

您应该定义height的的<div id="main" ，以显示它的滚动条。 你是否计算它使用JavaScript或jQuery的。 

   #topbar {
    height: 40px;
    background-color: blue;
}

#sidebar {
    position:absolute;
    top: 40px;  
    bottom: 40px;
    width: auto;
    height:200px;
    overflow: hidden;   
}

#title {
    height:30px;
    background-color: red;
}

#main {
    height: 100px;
    width: 100%;
    overflow:auto;
}

检查此更新的jsfiddle 。



Answer 6:

您需要设置高度#main。 这是工作在http://jsfiddle.net/PTRCr/7/ 

#main {
    height: 100px;
    overflow-y: scroll;
}


Answer 7:

这是唯一可能的，如果你知道你的#title的高度，在任一px或父容器的百分比

#title在设置px 的jsfiddle 

#main {
    position:absolute;
    top:30px; /* set this to whatever you have set the height of #title to*/
    bottom:0px;
    overflow-y: scroll;
}

#title设定为％ 的jsfiddle -测试在IE / FF /铬



文章来源: create a scroll bar in a sidebar
标签： css scrollbar
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~