设置滚动条的填充顶部

问题描述 投票：-2回答：1

我知道已经有一个这样的问题。但是我不能使用margin-top作为解决方案。我有一个补充工具栏，我在其中将padding-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>
html css
1个回答
0
投票

我找到了解决方案。

我只是将侧边栏的高度设置为90vh（100vh-导航栏高度= 90vh），并将顶部设置为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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.