向下滚动整个浏览器窗口 [英] Scroll down whole browser window

问题描述

我正在建立一个网站，这是我当前的设置:

I am making a website and this is my current setup:

http://puu.sh/hU5KJ/421b5aa76d.png

我有2个主要div，首先，粗体显示在整个浏览器窗口中，然后单击按钮，然后将整个窗口向下滚动到第二个div. div的字面位置如图片所示，较低的div不在屏幕上，向下滚动功能是一种简单的javascript.

I have 2 main divs, at first the bold one is displayed in full browser window, and after clicking the button, whole window is scrolled down to the 2nd div. The divs are literally placed as in the picture, with the lower div being off screen and the scroll down function is a simple javascript.

我在这里的主要问题是，这可以通过其他替代方式吗?这感觉有点不对劲，每当我在较低的div并调整浏览器窗口的高度时，这一切都会搞砸了.

My main question here is, can this be done in any alternative way? This feels kinda wrong, also whenever i'm at the lower div and resize the height of the browser window it all gets messed up.

我想拥有它，以使其无法通过除那些按钮之外的任何其他方式滚动(没有箭头键，没有鼠标滚轮，并且最好没有pg向下/向上按钮).那有可能吗?

I'd like to have it so that its impossible to scroll by any other means than just those buttons (no arrowkeys, no mouse wheel and preferably no pg down/up buttons). Is that even possible?

HTML积累:

  <div id="wrapper">
  <div id = "overall"></div>
  <div id = "chat"></div>
  </div>

"overall"是图像上的粗体div，"chat"是下部的div.我在这些div中放置了许多其他内容，如果您希望我可以发布完整的代码，但这主要是关于仅在这两个之间进行切换.

With "overall" being the bolded div on the image and "chat" being the lower one. There is plenty of other things i have placed inside of these divs, if you want the full code i can post it, but this is mostly about switching between these 2 only.

CSS:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

#wrapper {
  overflow-y: hidden;
  overflow-x: hidden;
}

#overall {
  background-color: red;
  height: 100%;
  width: 100%;
  text-align: center;
}

#chat {
  width: 100%;
  height: 100%; 
  overflow-x: hidden;
  overflow-y: hidden;
}

以及滚动的JS函数:

function scrollDown() {


    $('html, body').animate({
        scrollTop: $("#chat").offset().top
    }, 1000);

}



function scrollUp() {


    $('html, body').animate({
        scrollTop: $("#overall").offset().top
    }, 1000);
}

我的知识水平很低，我想您可以看到我目前仅了解最基本的知识，因此请解释您的答案.谢谢你的帮助.

My knowledge level is low and i guess you can see i only understand the most basic stuff for now, so please explain your answers. Thanks for any help.

推荐答案

关键是使用CSS width:100% & height:100%属性.这些将确保您的元素始终调整为浏览器的全部大小.即使您调整大小.

The key is using the CSS width:100% & height:100% properties. These will make sure your element is always sized to the full size of your browser. Even when you resize it.

$(document).ready(function() {
  $("#scroll-down").click(function(event) {
    event.preventDefault();
    $('html, body').animate({
      scrollTop: $("#block2").offset().top + 'px'
    }, 'slow');
  })
  $("#scroll-up").click(function(event) {
    event.preventDefault();
    $('html, body').animate({
      scrollTop: $("#block1").offset().top + 'px'
    }, 'slow');
  });
});

html,
body {
  height: 100%;
}
.full-size {
  display: block;
  width: 100%;
  height: 100%;
}
#block1 {
  background-color: red;
}
#block2 {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper full-size">
  <div class="full-size" id="block1">
    <a href="#block2" id="scroll-down">scroll down</a>
  </div>
  <div class="full-size" id="block2">
    <a href="#block1" id="scroll-up">scroll up</a>
  </div>
</div>

包括JS平滑滚动

这篇关于向下滚动整个浏览器窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！