时间戳

首页 > 解决方案 > CSS中的Y轴滚动？

html - CSS中的Y轴滚动？

问题描述

我无法让滚动条在任一轴上实际滚动

我试过添加“overflow-y”属性，但这只是让滚动条出现，它实际上并没有让我滚动。我添加了 html 文件，但删除了所有内容，除了与样式有关的内容。

html

    <html lang="en">
    <head>
    <title>Experience</title>
    <script type="text/javascript" src="JSFolder/jquery-3.4.1.min.js"></script>
    <script type="text/javascript"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devic-width, initial-scale=1">
    <link rel = "stylesheet" href = "exp.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
          $(function() {
        $("#visible").click(function() {
            $('#invisible').toggleClass("show");
          });  
        });
          $(function() {
        $("#visible1").click(function() {
            $('#invisible2').toggleClass("show");
          });  
        });
            $(function() {
        $("#visible2").click(function() {
            $('#invisible3').toggleClass("show");
          });  
        });
        $(function() {
        $("#visible3").click(function() {
            $('#invisible4').toggleClass("show");
          });  
        });
        $(function() {
        $("#visible4").click(function() {
            $('#invisible5').toggleClass("show");
          });  
        });
        $(function() {
        $("#visible6").click(function() {
            $('#invisible6').toggleClass("show");
          });  
        });
        $(function() {
        $("#visible7").click(function() {
            $('#invisible7').toggleClass("show");
          });  
        });
        $(function() {
        $("#visible8").click(function() {
            $('#invisible8').toggleClass("show");
          });  
        });
        </script>
        <style>
          .hide{display:none;}
          .show{display:block; color:#769EA8;}
          .push{top:350%;}
        </style>
    </head>
    <body class="body">
        <div class="background">
        </div>
        <div class="fr">
            <a href="exp.html" class="active">fr</a>
        </div>
        <div class="NavBar">
            <h1 id="experience">.</a>
        </div>
        <div id="mySidenav" class="sidenav">
        </div>
            <div>...
            </div>
        <span style="font-size:30px;cursor:pointer;color:#EBEDFA;position:fixed;left:5px" onclick="openNav()">&#9776;</span>
        <script src="http://code.jquery-3.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
            function openNav(){
                document.getElementById("mySidenav").style.width = "200px";
            }

            function closeNav() {
                document.getElementById("mySidenav").style.width = "0";
            }
        </script>
        <style>
            .hide{display:none;}
            .show{display:block;}
        </style>
    </body>
    </html>

CSS：

    body{
        position: relative;
        font-family: sans-sherif;
        background-color: #242424;
        overflow-y: scroll;
    }

    .NavBar{
        position: fixed;
        top: 8%;
        left: 26.5%;
        width: 100%
    }

    #experience{
        position: absolute;
        color: #EBEDFA;
        padding-right: 2%;
        padding-left: 2%;
        font-size: 35px;
        left: 14.5%;
    }

例如，如果我将浏览器变小或者浏览器不够大而无法显示所有内容，我希望能够滚动。

标签： htmlcsswebstyling

解决方案

基本上，overflow如果内容大于屏幕，将允许页面滚动。

试试这个 CSS: overflow: auto;。

如果您仍然无法滚动，另一种方法是使用此 JavaScript：

function pageScroll() {
        window.scrollBy(0,50); // horizontal and vertical scroll increments
        scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}

<body>并从标签或标签调用函数<button>，无论您想使用什么事件。

推荐阅读