在 elm 中获取页面 scrollTop 值

Question

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

我希望能够让我的模型对从页面顶部向下滚动的距离做出反应。

我有两个问题：

如何使用Javascript访问这个变量？理想情况下我想类似于 JQuery 的 $(window).scrollTop() 但没有 JQuery
如何将这个值传递回 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 滚动时，window.onscroll 处理程序就会向该信号发送新的 scrollTop 值。

为了对此进行测试，我们可以编写一个简单的小调试端口，它将更改浏览器标题栏以显示当前的 scrollTop 值。将此添加到 elm 文件：

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 and scroll-test.html。您可以在本地编译它，然后在页面上上下滚动时观察标题栏的变化。

在 elm 中获取页面 scrollTop 值

Getting the page scrollTop value in elm

javascript

scroll

elm