[英]overflow-y:hidden and overflow-x:hidden but how do I scroll down without the scroll bar
我正在嘗試創建一個與此http://www.alphatise.com/類似的網站 。 您可以僅使用滾動箭頭向下滾動滾動條。 我試圖將overflow-x和y設置為隱藏，但是當我嘗試它時不會滾動。 我可以為此使用目標嗎？ 這是我的jsfiddle http://jsfiddle.net/CB3DY/
任何幫助，將不勝感激。 這是我的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="center">
<div id="header">
<ul>
<li>Google</li>
<li>Nexus 5</li>
<li>Inspiration</li>
</ul>
</div>
<div id="content">
<div class="img-1" id="fixed">
<h1>Nexus 5.<br />
Made for <br />
what matters.<br />
Introducing the new <br />
5” phone from Google.<br /></h1>
</div>
<div id="text" class="img">
<img src="http://www.notebookcheck.net/fileadmin/_migrated/pics/nexus4-1_02.png"><p>
Speed and power to spare on a stunning 5” display.
Powered by Android™ 4.4, KitKat®.
It’s a 5” phone, and so much more. Built with precision, Nexus 5 delivers an intelligently simple design and showcases a stunning full HD display. Plus it comes in black and white.
All-new photo and video features help you capture moments in fresh new ways. And thanks to the latest from Android, Nexus 5 is fast, powerful and truly yours.</p>
</div>
<div class="img-2" id="fixed">
<h1>Nexus 5.<br />
Made for <br />
what matters.<br />
Introducing the new <br />
5” phone from Google.<br /></h1>
</div>
<div id="text" class="img">
<img src="http://www.notebookcheck.net/fileadmin/_migrated/pics/nexus4-1_02.png"><p>
Speed and power to spare on a stunning 5” display.
Powered by Android™ 4.4, KitKat®.
It’s a 5” phone, and so much more. Built with precision, Nexus 5 delivers an intelligently simple design and showcases a stunning full HD display. Plus it comes in black and white.
All-new photo and video features help you capture moments in fresh new ways. And thanks to the latest from Android, Nexus 5 is fast, powerful and truly yours.</p>
</div>
<div class="img-3" id="fixed">
<h1>Nexus 5.<br />
Made for <br />
what matters.<br />
Introducing the new <br />
5” phone from Google.<br /></h1>
</div>
<div id="text" class="img">
<img src="http://www.notebookcheck.net/fileadmin/_migrated/pics/nexus4-1_02.png"><p>
Speed and power to spare on a stunning 5” display.
Powered by Android™ 4.4, KitKat®.
It’s a 5” phone, and so much more. Built with precision, Nexus 5 delivers an intelligently simple design and showcases a stunning full HD display. Plus it comes in black and white.
All-new photo and video features help you capture moments in fresh new ways. And thanks to the latest from Android, Nexus 5 is fast, powerful and truly yours.</p>
</div>
>
<!-----thirdimageend----->
<!-----fourthimage--->
<div class="img-4" id="fixed">
<h1>Nexus 5.<br />
Made for <br />
what matters.<br />
Introducing the new <br />
5” phone from Google.<br /></h1>
<div id="text" class="img">
<img src=""><p>
Speed and power to spare on a stunning 5” display.
Powered by Android™ 4.4, KitKat®.
It’s a 5” phone, and so much more. Built with precision, Nexus 5 delivers an intelligently simple design and showcases a stunning full HD display. Plus it comes in black and white.
All-new photo and video features help you capture moments in fresh new ways. And thanks to the latest from Android, Nexus 5 is fast, powerful and truly yours.</p>
</div>
</div>
<!-----fourthimageend---->
<div id="footer">
<h2></h2>
<div id="footercontent">
<ul class="footer1">
<li>About Patient Handling</li>
<li>About Us</li>
<li>Location & Working Hours</li>
<li>Site Map</li>
<li>Our Guarantee</li>
<li>Terms of Use</li>
</ul>
<ul class="footer2">
<li>About Patient Handling</li>
<li>About Us</li>
<li>Location & Working Hours</li>
<li>Site Map</li>
<li>Our Guarantee</li>
<li>Terms of Use</li>
</ul>
<ul class="footer3">
<li>About Patient Handling</li>
<li>About Us</li>
<li>Location & Working Hours</li>
<li>Site Map</li>
<li>Our Guarantee</li>
<li>Terms of Use</li>
</ul>
<ul class="footer5">
<li>About Patient Handling</li>
<li>About Us</li>
<li>Location & Working Hours</li>
<li>Site Map</li>
<li>Our Guarantee</li>
<li>Terms of Use</li>
</ul>
<ul class="footer4">
<li>About Patient Handling</li>
<li>About Us</li>
<li>Location & Working Hours</li>
<li>Site Map</li>
<li>Our Guarantee</li>
<li>Terms of Use</li>
</ul>
</div><!-----footer content------------------------>
</div><!-----footer------------------------------->
<div id='footercopy'>
<p>Copyright patienthandling.com.au</p>
</div>
</div>
</div>
</body>
</html>
這是我的CSS：
html
{
background:silver;
overflow-x:hidden;
overflow-y:hidden;
}
#center
{
width:1700px;
margin-right:auto;
margin-left:auto;
}
#header
{
width:1700px;
margin-right:auto;
margin-left:-10px;;
background:silver;
position:fixed;
top:0;
left:0;
z-index:2;
font-family: 'Poiret One', cursive;
}
#header li
{
display:inline;
margin-right:auto;
margin-left:auto;
padding-left:20px;
}
#content
{
background:white;
margin-left:-10px;
}
.img
{
padding:20px;
width:1024px;
margin-right:auto;
margin-left:auto;
position:relative;
top:-100px;
}
#text
{
min-height:800px;
}
.img p
{
margin-top:-700px;
position:relative;
left:400px;
width:400px;
font-size:20px;
line-height:40px;
font-family: 'Poiret One', cursive;
}
#content p
{
margin-right:auto;
margin-left:auto;
}
#content img
{
margin-right:auto;
margin-left:auto;
line-height:20px;
min-height:400px;
}
#fixed
{
background-attachment:fixed;
width:100%;
position:relative;
padding:25% 0;
background-repeat:no-repeat;
background-position:center center;
background-size:100%;
}
.img-1
{
background-image:url('http://www.google.com.au/nexus/images/introvideo-endframe_n5.jpg');
}
.img-2
{
background-image:url('http://images.anandtech.com/doci/6440/Nexus-4-10-4571.jpg');
}
.img-3
{
background-image:url('http://www.google.com.au/nexus/images/introvideo-endframe_n5.jpg');
}
.img-4
{
background-image:url('http://zshop.vn/images/nexus_10_01.jpeg');
}
q
{
font-size:10em;
}
h1
{
width:1024px;
margin-right:auto;
margin-left:auto;
margin-top:-300px;
color:white;
font-family: 'Poiret One', cursive;
font-size:50px;
}
#footer
{
width:1700px;
margin-right:auto;
margin-left:auto;
background:white;
clear:both;
min-height:400px;
margin-top:-23px;
min-height:300px;
margin-right:auto;
margin-left:auto;
text-align:center;
overflow:hidden;
font-family: 'Poiret One', cursive;
}
#footercontent
{
width:1100px;
font-weight:20px;
margin-right:auto;
margin-left:auto;
padding-top:100px;
font-family: 'Poiret One', cursive;
font-size:13px;
}
.footer1
{
float:left;
padding-right:4px;
text-align:left;
}
.footer2
{
float:left;
padding-right:4px;
text-align:left;
}
.footer3
{
float:left;
padding-right:4px;
text-align:left;
}
.footer4
{
float:left;
padding-right:4px;
text-align:left;
}
.footer5
{
float:left;
text-align:left;
}
#footercopy
{
background:white;
text-align:center;
padding:20px;
margin-bottom:-10px;
color:black;
font-family: 'Poiret One', cursive;
}
/*ipads landscape*/
@media only screen
and (min-width : 1024px){
#center{width:1224px;}
.img p
{
margin-top:-700px;
position:relative;
left:200px;
width:400px;
font-size:20px;
line-height:40px;
font-family: 'Poiret One', cursive;
}
#fixed
{
background-attachment:fixed;
width:100%;
position:relative;
padding:25% 0;
background-repeat:no-repeat;
background-position:top center;
background-size:100% 100%
}
#footer,#footercontent{width:1024px;}
#footercontent{text-align:center;}
h1
{
width:1024px;
margin-right:auto;
margin-left:auto;
margin-top:-200px;
color:white;
font-family: 'Poiret One', cursive;
font-size:50px;
}
.img-4
{
background-image:url('http://zshop.vn/images/nexus_10_01.jpeg');
background-attachment:fixed;
width:100%;
position:relative;
padding:10% 0;
background-repeat:no-repeat;
background-position:top center;
background-size:100% 50%;
}
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px){
#center,#fixed{width:1700px;}
[1]: http://jsfiddle.net/CB3DY/
請注意，在alphatise的網站上，當您使用向下滾動和左側滾動鏈接之一滾動時，它將直接向下滾動（盡管帶有漂亮的動畫）到下一個顯示面板的完美正確位置。 我沒有看過他們的代碼，但是我很確定他們每當您按下向下/向上箭頭或單擊其中的一個時，他們只是使用Javascript將Javascript向下/向上滾動（請參閱執行此操作的一種方法）到適當位置紐扣。
使用隱藏的溢出-x和可見的溢出-y寬度絕對位置而不滾動
[英]Using hidden overflow-x and visible overflow-y width absolute position without scroll
如何在不將overflow-x更改為auto的情況下使overflow-y滾動？
[英]How to make overflow-y scroll without changing overflow-x to auto?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.