获取页面scrollTop值在elm中

Question

我开始玩榆树语.我正在制作一个基本的网页,我想让我的导航栏在滚动时粘到顶部.

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

我有两个问题:

1. 如何使用Javascript访问此变量？理想情况下,我想要像JQuery的东西,$(window).scrollTop()但没有JQuery
2. 如何将这个价值传递给榆树？我必须设置端口吗？

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值.将其添加到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.您可以在本地编译,然后在页面上向上和向下滚动时观察标题栏的更改.