Получение страницы scrollTop значение в elm

Question

Я начал играть с языком Elm. Я делаю базовую веб-страницу, и я бы хотел, чтобы мой навигационный бар придерживался вершины при прокрутке.

Я хочу, чтобы моя модель реагировала на расстояние, прокручиваемое вниз от верхней части страницы.

У меня есть две проблемы:

1. Как получить доступ к этой переменной с JavaScript? В идеале я хотел бы что-то вроде JQuery's $(window).scrollTop(), но без JQuery
2. Как передать это значение обратно в Elm? Должен ли я настроить порт?

Answer 1

Вам необходимо настроить порт в вязании, чтобы действовать как сигнал, который обеспечивает расстояние прокрутки. Поскольку мы собираемся предоставить это значение из JavaScript, вам нужно только для объявления функции порта подпись:

port scrollTop : Signal Int 

О себе, что ничего не будет делать. Вы должны отредактировать javascript, который инициирует ваше приложение elm, чтобы предоставить значения для этого сигнала. Вот 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. Добавьте это в файл вяза:

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. Вы можете скомпилировать это локально, а затем просматривать строку заголовка при прокрутке вверх и вниз по странице.