时间戳

首页 > 解决方案 > 构建交互式讲故事的滚动条的最简约方式？

javascript - 构建交互式讲故事的滚动条的最简约方式？

问题描述

我正在尝试构建一个静态但响应迅速的讲故事的 HTML 网站。我的目标是实现这样的目标： 在此处输入图像描述

左边是文本，右边是固定位置的 *.jpg 图像。当用户滚动左侧的文本时，右侧的图像保持固定位置，但在左侧滚动达到某个点后，会变为另一个带有短暂过渡的 *.jpg 图像。

在这种情况下响应意味着我对粘性滚动在较小的屏幕上处于非活动状态以及文本和图像块简单地返回到它们的正常断点行为完全满意。

我研究了各种 Storytelling 和滚动 JavaScript 库（Scrollstory、Waypoints 和 InView）来简单、轻量和容易地实现这个目标。所有这些（到目前为止）对于我正在尝试做的事情似乎完全过度设计。

勉强可用的教程和代码片段让我感觉有点像这样：

htm

我发现没有真正的参考资料告诉我如何从小步骤开始构建滚动条。不管图书馆。

各个库（具有可访问代码）的参考文件通常已经过时，并且专注于使用外部数据可视化框架，并且无论出于何种原因都需要加载多达四个其他外部脚本，并且仍然不提供响应功能。

我试图在这里重建这个展示示例：https ://russellgoldenberg.github.io/scrollama/sticky-side/因为它至少是我想要实现的目标的一半，但我无法让它工作并且我也不明白那里过度使用 JavaScript： https ://jsfiddle.net/gdkupcb6/2/ 

  <article>
<div class='step' data-step='1'>
  <p>STEP 1</p>
</div>
<div class='step' data-step='2'>
  <p>STEP 2</p>
</div>
<div class='step' data-step='3'>
  <p>STEP 3</p>
</div>
<div class='step' data-step='4'>
  <p>STEP 4</p>
</div>

代码在 HTML 方面看起来很简单，对我来说几乎所有库都有意义，但是当涉及到 JavsScript 部分时，我完全迷失了。为什么我在这里需要 D3？为什么要在滚动上进行简单的更改需要这么多 JS 功能？

我是否完全错误地认为有一种极简主义的方法可以在不涉及多个不同的外部脚本和库的情况下实现如此简单的粘性滚动？

有人可以为我指出一个逐步构建滚动条的好方向，使我能够理解进入的代码的每个部分，而不是在复杂的外部库和教程的参与下，这些库和教程似乎没有真正的开始也没有结束？

标签： javascripthtmlcssscrollbar

解决方案

For this you can use JavaScript - you add a window.addEventListener("wheel") or "scroll" and listen when your "picture".offsetTop gets to the right scroll position and turn position to of this element to "fixed". Also, you can optionally add a "slow motion in" effect or just play with how image scrolls with the page.

Your jsFiddle didnt work for me, but I like the idea so I plugged a little 30 lines of code ---DEMO--- on codepen for a similar purpose of this idea, its a little clunky will gladly take any advice from others, but it works. Atm it scrolls the image with your page seemingly changing images when chunks of text start and finish (I use emojies instead of images, but the idea is the same).

It should automatically scale to your screen sizes while still working, but it's untested so ..:D

var container = document.getElementById("container");
var stickyImage = document.getElementById("stickyImage");
var tempY;
window.addEventListener("scroll", (e) => {
//watch how image moves with scrolleing
    if(window.pageYOffset >= container.offsetTop && window.pageYOffset <= container.offsetTop+container.offsetHeight  - window.innerHeight ){
        console.log("slinding");
        stickyImage.style.position = "fixed";
        stickyImage.style.top = "0vh";
        stickyImage.style.marginTop = "";
        tempY = window.pageYOffset;
    }else if(window.pageYOffset <= container.offsetTop){
        console.log("top sxcreen");
        stickyImage.style.position = "absolute";
        stickyImage.style.top = "";
        stickyImage.style.marginTop = "";       
    }else{
        console.log("stop");
        stickyImage.style.position = "absolute";
        stickyImage.style.marginTop = tempY + "px";         
    }
//change images while scroll
    if(window.pageYOffset < document.getElementById("change1").offsetTop){
        stickyImage.textContent = "";
    }
    if(window.pageYOffset > document.getElementById("change1").offsetTop){
        stickyImage.textContent = "";
    }
    if(window.pageYOffset > document.getElementById("change2").offsetTop){
        stickyImage.textContent = "";
    }   
})

推荐阅读