获取elm中的页面scrollTop值
获取elm中的页面scrollTop值
提问于 2016-01-01 08:26:47
我已经开始玩榆树语了。我正在制作一个基本的网页，我想让我的导航条坚持在顶部时滚动。
我希望我的模型能够对从页面顶部向下滚动的距离做出反应。
我有两个问题：
- 如何使用Javascript访问此变量？理想情况下，我想要类似于JQuery的
$(window).scrollTop()但没有JQuery的东西 - 如何将此值传递给埃尔姆？我必须设立一个港口吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-01 15:17:28
您需要在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。您可以在本地编译它，然后在页面上上下滚动时观察标题栏的变化。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34554652
复制相关文章
相似问题
腾讯云开发者
