Переполнение прокручиваемого содержимого - PullRequest
Новая
       28

Переполнение прокручиваемого содержимого

0 голосов
/ 01 августа 2020

Я хочу, чтобы div «Scrollable» оставался внутри div «Animation-Menu», но я попробовал несколько способов и безрезультатно.

Вот мой индекс. html file 

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

Вот мой стиль. css file 

#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 "animation-menu". Панель навигации должна быть закреплена наверху, и только div "scrollable" должен прокручиваться.

Ответы [ 2 ]

1 голос
/ 01 августа 2020

Чтобы панель навигации была закреплена вверху, вы должны добавить свойство position:fixed в панель навигации. 

#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;
}
<!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>
См. Фрагмент полностью.
Дайте мне знать, если у вас есть какие-то другие мысли.
0 голосов
/ 01 августа 2020

если вы только что назначили высоту для #scrollable, я думаю, это решит вашу проблему 

#scrollable {
    overflow-y: auto;
}

до 

#scrollable {
      height: 500px;
}

см. Отредактированный код

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...