我开始玩榆树语.我正在制作一个基本的网页,我想让我的导航栏在滚动时粘到顶部.
我希望能够让我的模型对从页面顶部向下滚动的距离作出反应.
我有两个问题:
如何使用Javascript访问此变量？理想情况下,我想要像JQuery的东西,$(window).scrollTop()但没有JQuery
如何将这个价值传递给榆树？我必须设置端口吗？
Chad Gilbert.. 5
您需要在elm中设置一个端口,以充当提供scrollTop距离的信号.由于我们将从javascript中提供该值,您只需要声明端口函数签名:
port scrollTop : Signal Int
就其本身而言,这将无所作为.您必须编辑启动elm应用程序的javascript,以便为该信号提供值.这是设置它的javascript:
需要注意的两件事:您需要一个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.您可以在本地编译,然后在页面上向上和向下滚动时观察标题栏的更改.
您需要在elm中设置一个端口,以充当提供scrollTop距离的信号.由于我们将从javascript中提供该值,您只需要声明端口函数签名:
port scrollTop : Signal Int
就其本身而言,这将无所作为.您必须编辑启动elm应用程序的javascript,以便为该信号提供值.这是设置它的javascript:
需要注意的两件事:您需要一个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.您可以在本地编译,然后在页面上向上和向下滚动时观察标题栏的更改.
京公网安备 11010802040832号 | 京ICP备19059560号-6 