Установить padding-top для полосы прокрутки - PullRequest
Новая
       0

Установить padding-top для полосы прокрутки

0 голосов
/ 04 февраля 2020

Я знаю, что уже есть такой вопрос. Но я не могу использовать margin-top в качестве решения. У меня есть боковая панель, в которой я установил верхнюю панель на 10vh, чтобы она отображалась под панелью навигации. Моя боковая панель имеет много элементов, поэтому необходима полоса прокрутки. Но верхняя часть полосы прокрутки скрыта панелью навигации. Кто-нибудь знает, как я мог решить эту проблему?

Я уже пытался работать с margin-top, но затем мои элементы sidenav отображаются внизу страницы, и я не нашел решения для этой проблемы. Я также пытался использовать :: - webkit-scrollbar, но кажется, что это не работает с отступами.

Здесь вы можете увидеть код моей проблемы: 

function openNav() {

        document.getElementById("sidebar").style.width = "30%";


}

function closeNav() {
    document.getElementById("sidebar").style.width = "0";
}
.navbar{
    height: 35vh;
    z-index: 1;
}

.sidebar {
    padding-top: 35vh;
    height: 100%;
    width: 0;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.7s;
}
<!DOCTYPE html>
<html>
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <!-- CSS -->
    <link rel="stylesheet" href="main.css">

    <!-- JS -->
    <script src="main.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" onclick="openNav()">Open sidenav</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" onclick="closeNav()">Close sidenav</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
    </ul>
</nav>
<div id="sidebar" class="sidebar">
    <div class="SNHeader">
        <br>
        <h4>Categories:</h4>
    </div>
    <div class="sidebar-content">
        <div class="repeat">
            <ul>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

1 Ответ

0 голосов
/ 05 февраля 2020

Я нашел решение.

Я просто установил высоту боковой панели на 90vh (100vh - высота Navbar = 90vh) и установил top на 10vh. таким образом навигационная панель не будет отображаться под основным контентом. 

function openNav() {

        document.getElementById("sidebar").style.width = "30%";


}

function closeNav() {
    document.getElementById("sidebar").style.width = "0";
}
.navbar{
    height: 35vh;
    z-index: 1;
}

.sidebar {
    height: 65vh;
    width: 0;
    overflow-y: scroll;
    position: absolute;
    top: 10;
    left: 0;
    overflow-x: hidden;
    transition: 0.7s;
}
<!DOCTYPE html>
<html>
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <!-- CSS -->
    <link rel="stylesheet" href="main.css">

    <!-- JS -->
    <script src="main.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link" onclick="openNav()">Open sidenav</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" onclick="closeNav()">Close sidenav</a>
        </li>
    </ul>
</nav>
<div id="sidebar" class="sidebar">
    <div class="SNHeader">
        <br>
        <h4>Categories:</h4>
    </div>
    <div class="sidebar-content">
        <div class="repeat">
            <ul>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
                <li>Blah</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...