在CSS中Y轴滚动？

Question

I can't get the scroll-bar to actually scroll on either axis 我无法使滚动条实际在任一轴上滚动

I've tried added the "overflow-y" property but that just makes the scroll bar appear, it doesn't actually let me scroll. 我尝试添加“ overflow-y”属性，但这只是使滚动条出现，实际上并没有让我滚动。 I added the html file but removed all the content except what has to do with styling. 我添加了html文件，但删除了所有与样式无关的内容。

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: 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%;
    }

I want to be able to scroll if for example I make the browser small or if the browser is not big enough to show all of the content. 我希望能够滚动，例如，如果我使浏览器变小或浏览器的大小不足以显示所有内容。

Answer 1

Basically, overflow will allow the page to scroll if the content larger than the screen. 基本上，如果内容大于屏幕，则overflow将允许页面滚动。

Try this CSS: overflow: auto; 试试这个CSS： overflow: auto; . 。

Another way around if you still can't scroll is using this JavaScript: 如果您仍然无法滚动，另一种方法是使用以下JavaScript：

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

and call the function from the <body> tag or from a <button> tag, whatever the event you want to use. 并从<body>标记或<button>标记调用函数，无论您要使用什么事件。

Answer 2

You need some content which is wider than the viewport in order to be able to scroll. 您需要一些比视口更宽的内容才能滚动。 I have added some in the code snippet below, without making any other changes to your code. 我在下面的代码片段中添加了一些内容，但未对您的代码进行任何其他更改。

 body{ position: relative; font-family: sans-sherif; background-color: #242424; overflow-y: scroll; } .NavBar{ position: fixed; top: 8%; left: 26.5%; } #experience{ position: absolute; color: #EBEDFA; padding-right: 2%; padding-left: 2%; font-size: 35px; left: 14.5%; }

 <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 style="white-space: nowrap; color:white">This_is_a_reall_long_piece_of_text_which_will_be_wider_than_the_viewportttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt </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中Y轴滚动？

问题描述

2 个解决方案

解决方案1
0 2019-07-26 12:53:55

解决方案2
0 2019-07-26 12:55:29

在CSS中Y轴滚动？

问题描述

2 个解决方案

解决方案1 0 2019-07-26 12:53:55

解决方案2 0 2019-07-26 12:55:29

解决方案1
0 2019-07-26 12:53:55

解决方案2
0 2019-07-26 12:55:29