如何在水平滚动单独的容器时更改文本或元素？

Question

当您水平滚动文本上方的容器时，我正在尝试更改文本。触发器将基于像素或百分比，例如——如果您滚动到图像宽度的 20%，文本将会改变。

用什么方法比较好？

我最初尝试使用航点，但它似乎没有用，因为在水平滚动时偏移功能无法根据百分比或像素设置。

这是设置--

#overflow-scroll,
#overflow-scroll-offset {
  overflow: auto;
  height: 200px;
  background: none;
}

#image-scroll {
  width: 1000px;
  height: 100%;
  margin-left: 150px;
  background: pink;
  color: #fff;
}

.hide {
  display: none;
}

p {
  text-align: center;
}

<div id="overflow-scroll" class="mt-3">
  <div id="image-scroll">
  </div>
</div>

<div class="blocks">
  <p class="block1">One text</p>
  <p class="block2 hide">Two text</p>
  <p class="block3 hide">Three text</p>
</div>

JS fiddle link

Answer 1

您可以通过添加小 jQuery 脚本来完成。

$(document).ready(function(){
    $("#overflow-scroll").scroll(function(){
        var scrollRight = 200; //200 pixels
        if($("#overflow-scroll").scrollLeft() > scrollRight){
            //show block 2 and hide block1 text
            $(".block1").hide();
            $(".block2").show();
        }else{
            $(".block1").show();
          $(".block2").hide();
        }

    })
})

希望这就是您要找的。

这里是fiddlelink

如何在水平滚动单独的容器时更改文本或元素？

How do you change the text or element while horizontally scrolling through a separate container?

javascript

parallax

jquery-waypoints

scrollmagic