fullpage.js - установка responsiveWidth и scrollOverflow разбивает страницу на мобильном

Question

КОНТЕКСТЕ

Я использую fullpage.js на странице, и хотел бы, чтобы отключить его на мобильном телефоне, так как некоторые разделы не поместиться на одном экране на мобильных устройствах (они просто отключены). Я обнаружил, что значение responsiveWidth: 1000 и scrollOverflow: true имеет предполагаемый эффект.

Проблема

Однако установка этих параметров также, кажется, чтобы переместить всю страницу вверх экран и полтора - то есть верхнего 1,5 экранов ценности содержания невидимо, а страница начинается только около середины раздела 2. Кто-нибудь испытал эту ошибку раньше?

Любая конкретная причина, по которой я могу видеть это?

Answer 1

Вам не нужно использовать scrollOverflow, на самом деле, я всегда предлагаю людям не использовать его. Это не настоящий отзывчивый сайт!

Вы можете использовать responsiveWidth и responsiveHeight варианты, а затем заставить раздел быть как большой, как вы хотите это сделать:

.fp-responsive .fp-section, 
.fp-responsive .fp-slide, 
.fp-responsive .fp-tableCell{ 
    height: auto !important; 
} 

Я использовал класс .fp-responsive, который является одним из state classes added to the body by fullpage.js. Он будет добавлен, когда плагин запускает режим реагирования и предоставляет способ создания условных стилей CSS.