Фікс скролу нативного навігаційного меню на мобайлі
Use Case
Часто дизайнери та розробники початківці витрачають години на пошуки рішення для наступного кейсу. Мова йде про бургер меню на мобільних брейкпоінтах. Для кращого розуміння давайте розглянемо сценарій, коли подібна проблема може виникати.
Припустимо ми зверстали навігаційне меню для мобайлу, однак коли користувач викликає спадне бургер меню і починає взаємодіяти з елементом через скролл, то в певний момент, користувач починає бачити частину сторінки, яка вже більше не перекривається цим навігаційним меню. Складається враження, ніби висота цього елементу на певному моменті закінчується і користувач просто може проскролити далі.
В результаті це виглядає не дуже професійно. До того ж користувачі вже настільки звикли до цього елементу інтерфейсу, що подібна поведінка не співпадає з їхніми очікуваннями. Тому, щоб виправдати очікування наших юзерів, нам може бути в нагоді невеликий шматок кастомного коду, який вирішить проблему.
Додавання сніпету коду
Додай цей код в розділ <head> в налаштуваннях сайту, щоб таким чином застосувати цю функцію до всіх сторінок проєкту.
<script>
Webflow.push(function() {
$('.mobile-menu').click(function(event) {
var clicks = $(this).data('clicks');
event.preventDefault();
if (clicks) {
$('body').css('overflow', 'auto');
} else {
$('body').css('overflow', 'hidden');
}
$(this).data("clicks", !clicks);
});
});
</script>
Результат
В кінцевому результаті, при натисканні на іконку бургер-меню, користувач все ще зможе взаємодіяти з навігаційними елементами меню, однак при цьому він не зможе проскролити меню чи побачити контент за цим меню.
