html - 溢出-y :hidden and overflow-x:hidden but how do I scroll down without the scroll bar

标签 html css

我正在尝试制作一个类似于此的网站 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 向下/向上滚动 (see one way of doing this)每当您按下向下/向上箭头或单击其中一个按钮时,就会移动到正确的位置。

关于html - 溢出-y :hidden and overflow-x:hidden but how do I scroll down without the scroll bar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20437661/

相关文章:

html - 显示无序列表一直推到div的右边

css - sass 文件不是由 gulp 编译的

html - 列表自身崩溃?

javascript - 仅使用 CSS 关闭模式

php - 在 PHP 文件中写入 <?xml?>

html - 对齐图像和 2 行文本

css - 为不同的媒体宽度加载不同的 CSS

javascript - 覆盖浏览器地理位置通知

html - 如何在我的自定义导航栏中将我的 anchor 元素居中?

CSS:缩放 HTML5 Canvas 以使用所有父级 div 空间