在CSS中Y軸滾動？
[英]Y-axis scrolling in css?
問題描述
我無法使滾動條實際在任一軸上滾動
我嘗試添加“ 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()">☰</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%;
}
我希望能夠滾動，例如，如果我使瀏覽器變小或瀏覽器的大小不足以顯示所有內容。
2 個解決方案
解決方案1
0 2019-07-26 12:53:55
基本上，如果內容大於屏幕，則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>標記調用函數，無論您要使用什么事件。
解決方案2
0 2019-07-26 12:55:29
您需要一些比視口更寬的內容才能滾動。 我在下面的代碼片段中添加了一些內容，但未對您的代碼進行任何其他更改。
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()">☰</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>
停止邊欄在y軸上滾動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.