Почему добавление CSS-класса к элементу HTML-страницы прерывает прокрутку на странице, получаемой Turbolinks? - PullRequest
Новая
       11

Почему добавление CSS-класса к элементу HTML-страницы прерывает прокрутку на странице, получаемой Turbolinks?

0 голосов
/ 14 сентября 2018

Я столкнулся с очень интересной ошибкой в ​​старом Rails-проекте с участием Turbolinks.Вот описание ошибки:

Всякий раз, когда пользователь нажимает на значок навигации гамбургера, боковая навигация анимируется, чтобы открыть список ссылок навигации, которые нужно щелкнуть.При нажатии на этот значок jQuery добавит класс к элементу html на странице.Всякий раз, когда пользователь нажимает на одну из этих навигационных ссылок, Turbolinks делает то, что делает Turbolinks: делает XHR-запрос к серверу для получения HTML-кода, необходимого для страницы, и заменяет тег body страницы для тега body в ответе.Однако, когда Turbolinks нарисовал страницу с новым тегом body с сервера, посетитель не смог прокрутить страницу вниз - страница выглядела замороженной.

Когда я удалил jQuery, добавивший класс CSS в *Элемент 1006 * при нажатии на навигацию, все анимации напоминают одинаковые.Затем я щелкнул по одной из ссылок, Turbolinks запустился, и теперь страница внезапно разморозилась - я мог прокручивать страницу вверх и вниз.

Почему первоначальный автор применил CSS к html во время события клика по гамбургеру нав, я не знаю.Однако, когда я удалил это поведение jQuery, добавившее класс CSS к элементу html, страница, которую рисовал Turbolinks, была прокручиваемой.

Кто-нибудь знает, почему добавление класса CSS к элементу html сломало страницу, которую Turbolinks извлек и нарисовал?И кто-нибудь знает, почему нарисованная страница Turbolinks была прокручиваемой, когда я удалил jQuery, добавивший класс CSS к элементу html?

РЕДАКТИРОВАТЬ:

CSSкласс, который jQuery добавил к элементу html, был следующим: 

.-page-overflow-hidden {
  overflow: hidden;
}

1 Ответ

0 голосов
/ 14 сентября 2018

Это не ошибка, это указано в readme Turbolinks https://github.com/turbolinks/turbolinks#navigating-with-turbolinks

Во время рендеринга Turbolinks сразу заменяет текущий элемент body и объединяет содержимое элемента head, Окно JavaScript и объекты документа, а также элемент HTML html сохраняются от одного рендеринга к следующему .

Проверьте полужирную часть.Элемент html сохраняется с одной страницы на другую, поэтому любой примененный к нему класс сохраняется.Ваш код устанавливает overflow: hidden свойство CSS, поэтому оно остается там после отображения новой страницы.

Я бы порекомендовал добавить что-то подобное в ваш файл js 

document.addEventListener('turbolinks:before-render', function(event) {
  document.getElementsByTagName('HTML')[0].classList.remove('-page-overflow-hidden');
})

Это будетпрослушайте событие Turbolink before-render (которое запускается сразу после начала рендеринга новой страницы), и вы можете удалить этот класс из первого HTML-элемента, на случай, если он установлен.

...