如何使用 javascript 使此滚动条工作答案

【问题标题】：How to make this scrollbar working using javascript如何使用 javascript 使此滚动条工作
【发布时间】：2015-01-30 09:11:02
【问题描述】：

[注意：我想用 javascript 来做]

我想获得一个 javascript，以便用户只能看到 "content-one" 或 "content-two" 或 "content-three" 。简单地说，完整的窗口将是红色或绿色或蓝色。当浏览器打开时，全屏显示为红色。向下滚动时，它将是绿色，然后是蓝色。另一方面，当用户向上滚动时，它将是绿色然后是红色。 [注意：在整个过程中不会出现组合背景色]。你能帮我做这件事吗？这是我目前正在尝试的代码：

< script >
  function scrollfunction() {

    h1 = document.getElementById("content-one").offsetHeight;
    h2 = document.getElementById("content-two").offsetHeight;
    h3 = document.getElementById("content-three").offsetHeight;

    hs = document.body.scrollTop;
    var hb = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;


    if ((hs + hb) > h1) {
      vall = (hs + hb);
      window.scrollTo(0, vall);
    }
  } < /script>

body,
html {
  height: 100%;
}

<body onscroll="scrollFunction()">
  <div id="content-one" style="width:100%; background:red; height:100%;"></div>
  <div id="content-two" style="width:100%; background:green; height:200%;"></div>
  <div id="content-three" style="width:100%; background:blue; height:300%;"></div>
</body>

【问题讨论】：

我已将脚本放入 sn-p 中以便我们可以轻松查看...请添加一些 CSS，因为这不会按原样执行任何操作。
它只显示3种背景颜色。如果你在 html 文件中运行上面的 htm，你会看到这些颜色。
身高：100% 没有=没有。所以你可能想解决这个问题。
高度：100% 表示整个窗口/车身高度。请在一个html文件中运行它，你会看到它。
所有内部 div 的高度是否相同或可能不同？

标签： javascript

【解决方案1】：

这应该可行：

<script>
  function scrollFunction() {
    h1 = document.getElementById("content-one").offsetHeight;
    h2 = document.getElementById("content-two").offsetHeight;
    h3 = document.getElementById("content-three").offsetHeight;
    hs = document.body.scrollTop;
    hb = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

// window height - scroll top
dumy = hs % hb ;
direction = (dumy/hb) * 100 ;

//downward
    if ( direction < 50) {
      vall = hs - ( -hb ) - dumy ;
      window.scrollTo(0, vall);

    }

 // upward
    if ( direction > 50) {
      vall = hs -  dumy ;
      window.scrollTo(0, vall);

    }


  } 
</script>

【讨论】：

现在检查新脚本。
现在轮到你了。使时间平滑。

【解决方案2】：

在我看来，这是“不要重新发明轮子”这句话的完美案例。有很多插件可以用于这个确切的目的（即使我已经写了一个）。这是一个看起来不错的：http://alvarotrigo.com/fullPage/#firstPage。

编辑：如果您想推出自己的解决方案，这对我有用。您将主体的溢出设置为隐藏，然后上下移动容器。要决定显示哪张幻灯片，您可以在 body 上设置一个属性，这是一个示例：

http://jsfiddle.net/9ta7zw3s/8/

关键是这部分css：

body[data-current_index="0"] .main{
         top: 0;   
}

这部分JS：

$body.attr('data-current_index', current_page_index);

还有这部分 HTML：

<body data-current_index="0">

【讨论】：

你还没有使用滚动条。您已经使用 onclick 处理程序完成了它。但是当用户向下和向上滚动时，它就会起作用。
Jonas Grumann：你做了一件非常简单的事情。但是这个滚动效果会很酷。
您的示例非常基础。你不需要在那里使用javascript。您可以使用#id 放置链接。然后您的相关页面将被支持。但这个问题是完全不同的和动态的。我找到了一个适用于向下滚动的解决方案。但它不适用于向上滚动。
所以它的目的：动态背景改变用户的眼睛。
好吧，也许我没有 100% 理解这个问题

【解决方案3】：

我想我会通过将三个 div 堆叠在一起然后根据滚动位置更改不透明度来解决此问题。

这不是最好的解决方案，但您可以尝试一下，希望对您有所帮助。三个div的HTML：

<div class="outer">
    <div id="content1"></div>
    <div id="content2"></div>
    <div id="content3"></div>
</div>

CSS 将 div 置于彼此之上：

 #content1 {
    position: absolute;
    width: 100%;
    opacity: 1;
    background-color: blue;
    height: 300%;
}

#content2 {

    position: absolute;
    width: 100%;
    background: green;
    height: 300%;
}

#content3 {
    position: absolute;
    width: 100%;
    background: red;
    height: 300%;
}

JQuery/JavaScript 来管理滚动和屏幕颜色变化：

$(window).scroll(function () {
    var st = $(document).scrollTop();
    if (st == 0) {
        $("#content3").css({
            opacity: 1
        });
        $("#content2").css({
            opacity: 0
        });
        $("#content1").css({
            opacity: 0
        });
    }
    if (st > $(window).height() / 2) {
        $("#content3").css({
            opacity: 0
        });
        $("#content2").css({
            opacity: 1
        });
        $("#content1").css({
            opacity: 0
        });
    }
    if (st >= ($(window).height() * 2)) {
        $("#content3").css({
            opacity: 0
        });
        $("#content2").css({
            opacity: 0
        });
        $("#content1").css({
            opacity: 1
        });
    }
});

和工作的 JSFiddle http://jsfiddle.net/j16kam94/11/

不要忘记包含 Jquery！

【讨论】：