文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >可滚动内容溢出

问可滚动内容溢出
EN

Stack Overflow用户
提问于 2020-08-01 15:57:49
回答 2查看 39关注 0票数 0

我想要div“滚动”停留在div“动画-菜单”中，但是我尝试了几种方法&没有结果。

这是我的index.html文件

代码语言：javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
        <link href="./css/style.css" rel="stylesheet">      
    </head>

    <body>
        <div id="animation-menu">
            <nav class="navbar navbar-dark bg-dark justify-content-center">
                <span class="navbar-brand">Animationen</span>
            </nav>
            <div id="scrollable">
                <div class="search-bar ml-3 mr-3 mb-3">
                    <div class="md-form">
                        <input type="text" id="form1" class="form-control">
                        <label for="form1">Animation suchen</label>
                    </div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>                                                                                                                          
            </div>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js"></script>
        <script>
            Scrollbar.init(document.querySelector('#scrollable'));
        </script>
    </body>
</html>

这是我的style.css文件

代码语言：javascript
复制
#animation-menu {
    left: 0;
    top: 0;
    margin: 2rem;
    width: 25rem;
    height: 30rem;
    background-color: rgba(33, 33, 33, 0.8);
    position:fixed;
    overflow:hidden;
}

#animation-menu > nav {
    text-align: center;
}

.animation {
    color: white;
}

.d-flex {
    opacity: 0.8;
}

#scrollable {
    overflow-y: auto;
}

也许你可以看到，我也使用自己的滚动条。但这应该在div“动画菜单”中。导航条应该固定在顶部&只有div " scrollable“应该是可滚动的。

css
overflow
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-08-01 16:17:53

要将导航条固定在顶部，应将position:fixed属性添加到导航栏中。

​

代码语言：javascript
复制
#animation-menu {
    margin: 2rem;
    width: 25rem;
    height: 30rem;
    background-color: rgba(33, 33, 33, 0.8);
    overflow:auto;
}

#animation-menu > nav {
    text-align: center;
    width: 25rem;
    background-color: rgba(33, 33, 33, 0.8);
    position:fixed;
    overflow:auto;
     z-index:99;
}

.animation {
    color: white;
}

.d-flex {
    opacity: 0.8;
}

#scrollable {
    overflow:hidden;
    margin-top:3rem;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
        <link href="./css/style.css" rel="stylesheet">      
    </head>

    <body>
        <div id="animation-menu">
            <nav class="navbar navbar-dark bg-dark justify-content-center">
                <span class="navbar-brand">Animationen</span>
            </nav>
            <div id="scrollable">
                <div class="search-bar ml-3 mr-3 mb-3">
                    <div class="md-form">
                        <input type="text" id="form1" class="form-control">
                        <label for="form1">Animation suchen</label>
                    </div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-2" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>
                <div class="d-flex p-2 grey lighten-1" id="animation-card">
                    <div class="text-center ml-3">Lorem ipsum</div>
                </div>                                                                                                                          
            </div>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js"></script>
        <script>
            Scrollbar.init(document.querySelector('#scrollable'));
        </script>
    </body>
</html>

看到完整页面中的片段.

如果你还有别的事，请告诉我。

​

票数 1
EN

Stack Overflow用户

发布于 2020-08-01 16:25:10

--如果您刚刚将一个高度分配给可滚动的#，我认为它将修复您的问题

代码语言：javascript
复制
#scrollable {
    overflow-y: auto;
}

到

代码语言：javascript
复制
#scrollable {
      height: 500px;
}

请参阅已编辑的代码

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/63207208

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档