在 elm 中获取页面 scrollTop 值答案

【问题标题】：Getting the page scrollTop value in elm在 elm 中获取页面 scrollTop 值
【发布时间】：2016-01-01 08:26:47
【问题描述】：

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

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

我有两个问题：

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

【问题讨论】：

标签： javascript scroll elm

【解决方案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 值。将此添加到 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 和 scroll-test.html。您可以在本地编译它，然后在页面上上下滚动时观察标题栏的变化。

【讨论】：