Question

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

这有什么好方法？

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

这是设置 -

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

JS fiddle link

Answer 1

您可以通过添加小型jQuery脚本来实现。

希望这是你所寻找的。

这是小提琴Base64 on Wikipedia

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

1 个答案: