javascript - 在 elm 中获取页面 scrollTop 值

Question

我已经开始使用 Elm 语言。我正在制作一个基本网页，我想让我的导航栏在滚动时保持在顶部。

我希望能够让我的模型对从页面顶部向下滚动的距离使用react。

我有两个问题:

1. 如何使用 Javascript 访问这个变量？理想情况下我想类似于 JQuery 的 $(window).scrollTop() 但没有 JQuery
2. 如何将这个值传递回 Elm？我必须设置一个端口吗？

Answer 1

您需要在 elm 中设置一个端口作为提供 scrollTop 距离的信号。由于我们将从 javascript 中提供该值，因此您只需要声明端口函数签名:

port scrollTop : Signal Int

就其本身而言，它什么也做不了。您必须编辑启动 elm 应用程序的 javascript 以提供该信号的值。这是设置它的 javascript:

<script type="text/javascript">
var app = Elm.fullscreen(Elm.Main, {
  scrollTop: document.body.scrollTop
});

window.onscroll = function () {
  app.ports.scrollTop.send(document.body.scrollTop);
};
</script>

需要注意两点:您需要 scrollTop 信号的初始值。这就是我作为第二个参数发送给 Elm.fullscreen() 的内容。这保证了当您的应用程序加载时，它将立即以正确的 scrollTop 值开始。每当窗口滚动时，window.onscroll 处理程序就会向该信号发送新的 scrollTop 值。

为了测试这一点，我们可以编写一个简单的小调试端口，它将更改浏览器标题栏以显示当前的 scrollTop 值。将此添加到榆树文件中:

port title : Signal String
port title =
  Signal.map toString scrollTop

最后，对于我们的测试，我们只需要一个高大的页面。这应该可以解决问题:

main =
  let
    line n =
      div [] [ text <| "Line #" ++ (toString n) ]
  in
    div []
      <| List.map line [0..100]

我在这里提供了完整的代码:Main.elm和 scroll-test.html .您可以在本地编译它，然后在页面上上下滚动时观察标题栏的变化。