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

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

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

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

fayong lin

Ответов: 1

Ответы (1)

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

port scrollTop : Сигнал Int

Само по себе это ничего не даст. Вы должны отредактировать javascript, который инициирует ваше приложение elm, чтобы обеспечить значения для этого сигнала. Вот сценарий javascript для настройки:


Два момента, на которые следует обратить внимание: вам необходимо начальное значение для сигнала scrollTop. Именно его я передаю в качестве второго параметра в Elm.fullscreen(). Это гарантирует, что когда ваше приложение загрузится, оно сразу же начнет работу с правильным значением scrollTop. Затем обработчик window.onscroll отправляет новые значения scrollTop в этот сигнал каждый раз, когда окно прокручивается.

Чтобы проверить это, мы можем написать простой маленький отладочный порт, который изменит строку заголовка браузера, чтобы показать текущее значение scrollTop. Добавьте это в файл elm:

port title : Signal String
заголовок порта =
  Signal.map toString scrollTop

И наконец, для нашего теста нам просто нужна высокая страница. Это должно помочь:

main =
  пусть
    строка n =
      div [] [ text <| "Строка #" ++ (toString n) ]
  
    div []
      <| List.map line [0..100]

Я предоставил полный код здесь: Main.elm и scroll-test.html. Вы можете скомпилировать их локально, а затем посмотреть, как меняется строка заголовка при прокрутке страницы вверх и вниз.

2022 WebDevInsider