Fullpage scrolloverflow не работает

Import scrollOverflow #2442

Comments

ghost commented Dec 6, 2016 •

Hi,
I want use fullpage and overflow in my project but when I try to import overflow the console return this error IScroll is not defined(…)

After that I tried to add this

But a new error appeared
t.wheelOff is not a function(…)

The text was updated successfully, but these errors were encountered:

alvarotrigo commented Dec 7, 2016

Can you please add a reproduction somewhere?

ghost commented Dec 7, 2016

hi @alvarotrigo, I’m sorry but I don’t understand what you expect of me.

alvarotrigo commented Dec 7, 2016

A jsfiddle or codepen where I can see an example of the issue taking place as well as your HTML markup.

ghost commented Dec 7, 2016

I can’t recreate my dev environnement in jsfiddle or codepen.

My html look like this

Fullpage.js works alone but if I want to use it with scrollOverflow it will return the errors described in my first post.

alvarotrigo commented Dec 7, 2016

You should be having something inside your sections for scrollOverflow to be used.

In any case, I can’t help you without a reproduction I’m afraid. But it seems your script is failing trying to get the iScroll instance from a section.

Not quite sure how the import works in your case anyways. Is that ES6 module syntax? And if so, where are you executing it? It doesn’t seem to be compatible with many browsers yet according to mozilla docs.

If you are using babell.js or similar, could you show me the resulting code?

ghost commented Dec 7, 2016

It is my app code output

alvarotrigo commented Dec 7, 2016

It seems you are using require.js?
If so, this issue is a duplicated of #2250

The problem when using require is that makes dependencies compulsory as far as I know.
And scrollOverflow shouldn’t be compulsory.

It seems to be some kind of trick, but I didn’t look at it very much to be honest.

Источник

scrollOverflow: true, causes not clickable links on mobile devices #2035

Comments

stephan-strate commented May 27, 2016

I just upgraded the fullpage.js plugin to the newest version, because I had problems with the scrolling bar in the old version.
Now the scrolling bar is fine, everything works well, but not the links!
I set scrollOverflow: true and when iScroll adds a scrollbar all links are not clickable anymore, just tested it on 3 different phones (LG L90, LG L40 & an old Sony) and 2 tablets (Nexus 7, Lenovo A10-70). Don’t know what to do.

The text was updated successfully, but these errors were encountered:

alvarotrigo commented May 27, 2016

Seems to be a quite important bug of iScroll.js. cubiq/iscroll#783

alvarotrigo commented May 27, 2016

It seems you can solve it for now by using the iScroll option click:true .
So just pass it on the scrollOverflowOptions option of fullpage.js:

stephan-strate commented May 27, 2016

This one works, thank you!

alvarotrigo commented May 27, 2016

I’ll keep it open as it is something to be added by default in fullpage.js.

alvarotrigo commented May 31, 2016

martarakoczy commented Jun 8, 2016

When click is set to true, tap is not working and with click set to false tap is working but click is not. That was my problem.
I fixed it with (using Modernizr):

alvarotrigo commented Jun 8, 2016

@martarakoczy yeap, its a pity iScroll.js doesn’t seem to be maintained by @cubiq as actively anymore.
I guess we’ll have to keep fixing bugs in the forked version of iScroll.js.

gyduxa commented Oct 20, 2016

Hello
I still can’t get the links to work on mobile iOS, with the properties:

I’m using fullPage version 2.8.7 and iScroll version 5.2.0.

Codepen: http://codepen.io/gyduxa/pen/qaQJLr — which simulates the non working link on iphone or iphone in chrome devTools.

Is there something missing?

alvarotrigo commented Oct 20, 2016

I suppose you are using the vendor file scrolloverflow.js included in fullPage.js right?
If not, you should. It is not a copy of iScroll.js but a fork which solves iScroll.js bugs.

Try it using the dev version fullPage.js 2.8.8 which solves some click and touch event issues in 2.8.7. Note it is not yet available in the minified version.

gyduxa commented Oct 20, 2016

Thank you very much for the fast answer!

Yes, I’m using a jquery.scrolloverflow.min.js . In the first comment of the file it says:
/*! iScroll v5.2.0

(c) 2008-2016 Matteo Spinelli

http://cubiq.org/license */
but I didn’t find a CDN to use in the codePen so used the regular iScroll there.

I’ve updated to fullPage.js 2.8.8 and now it works!

It only has an error but I don’t find any difference in the navigation on desktop and iphone:
Uncaught TypeError: iScrollInstance.wheelOff is not a function — jquery.fullPage.js:2969

Thank you very much!

alvarotrigo commented Oct 20, 2016

Uncaught TypeError: iScrollInstance.wheelOff is not a function — jquery.fullPage.js:2969

You need to include scrolloverflow.js before fullPage.js.

gyduxa commented Oct 20, 2016

That was dumb of my part.
Thank you very much again.
No errors. Solved!

stevenprinsloo commented Oct 31, 2016

I have a similar problem on my site, where when I view it on my mobile I cannot click the links on the middle of the page, well, basically the links don’t work. I have — scrollOverflow set to false.

Using fullpage.js 2.8.7, tried using 2.8.8 and it didn’t work.

Malform

visual identity project

For some reason, this link won’t work.

alvarotrigo commented Oct 31, 2016

Using fullpage.js 2.8.7, tried using 2.8.8 and it didn’t work.

Use 2.8.8.
If it doens’t work for you, you are doing something wrong.

If you believe its a bug in fullPage.js then provide an isolated reproduction in jsfiddle or codepen and proceed to create a new issue in the forum.

antoinefaddoul commented Nov 8, 2016

Hello I am using the version 2.8.8.
When I have a page that contains Links and Buttons, and it is opened using Chrome for Android, I am facing the following issues:

1. When the page contains scrolling & scrollOverflow = true & scrollOverflowOptions.click = false ==> The Links are Not Clickable but the Buttons are Clickable!
2. When the page contains scrolling & scrollOverflow = true & scrollOverflowOptions.click = true ==> The Links are Clickable but the Buttons are Not Clickable!

Note that the above issues are not occurring in case I don’t have scrolling in my page.

alvarotrigo commented Nov 8, 2016

When the page contains scrolling & scrollOverflow = true & scrollOverflowOptions.click = false

Why are you even setting the click option? Don’t set it at all. FullPage.js sets it to true for touch devices and false otherwise. Which seems to be the only way it works properly.
You don’t have to worry about it. If you change it, you’ll have to deal with the consequences by yourself. Not something fullpage.js will support.

antoinefaddoul commented Nov 8, 2016

If I don’t set the Click option, the buttons become un-clickable.

alvarotrigo commented Nov 8, 2016

@antoinefaddoul can you open a new topic with a link to an isolated reproduction of it (no external css or js) ?

10ve-t commented Nov 11, 2016 •

Hi.
I am facing same issue. could you check ｔhe link below on iPhone or other smartphones?
http://codepen.io/TakahiroHishinuma/pen/RorqQe
I can not click checkbox, but link is clickable.

alvarotrigo commented Nov 11, 2016

I can not click chekbox, but link is clickable.

You are not using the vendor file required by fullPage.js when using scrollOverflow , which is located in the vendor folder as stated in the docs.
You are instead using 5.2.0/iscroll-infinite.min.js and fullPage.js might not work as expected with it.

10ve-t commented Nov 12, 2016 •

the vendor file required by fullPage.js when using scrollOverflow

i use vendors/scrolloverflow.min.js is this file incorrect? I reproduce this error in the link below
http://egao1010.sakura.ne.jp/fullpage/
I can’t click checkbox and submit button on mobile devices.

alvarotrigo commented Nov 14, 2016 •

Try placing your click event on the afterRender function. Check the FAQs to know why.

Источник

fullPage.js не определяет высоту динамического сгенерированного контента при использовании scrollOverflow

Я использую fullpage.js для своего сайта. О fullpage.js все работает нормально. Я хочу открыть div по щелчку. Я могу открыть div по клику, который содержит видео YouTube. Но когда div виден, прокрутка браузера будет отключена. Я не понимаю, где я ошибаюсь.

вот пример моего кода:

Этот код открывает div как ожидалось, но прокрутка для просмотра последнего содержимого не работает. Вместо видео, если я вхожу в текстовый прокруток, отлично работает. Как только я добавлю видео в div, прокрутки перестанут работать. Я не задал свойство overflow для #text . Пожалуйста, помогите мне.

Прежде всего, вы должны использовать scrollOverflow:true а не normalScrollElements .

(по умолчанию false) определяет, создавать ли прокрутку для раздела, если его содержимое больше его высоты. Если установлено значение true, ваш контент будет завернут плагином. Рассмотрите возможность использования делегирования или загрузки других скриптов в обратном вызове afterRender. В случае установки его true, для него требуется плагин поставщика jquery.slimscroll.min, и он должен быть загружен перед плагином fullPage.js. Например:

Затем fullPage.js вычисляет высоту ваших разделов при загрузке страницы. Если видео не отображаются при загрузке страницы, fullPage.js не будет знать, что содержимое меняется до тех пор, пока вы не сообщите об этом.

Подробнее о методе reBuild в документах:

Обновляет структуру DOM, чтобы соответствовать размеру нового окна или его содержимому. Идеально подходит для использования в сочетании с вызовами AJAX или внешними изменениями в структуре DOM сайта.

Источник

Fullpage scrolloverflow не работает

| 7Кб в формате gzip | Создано @imac2

Простая и удобная в использовании библиотека для создания веб-сайтов с полноэкранной прокруткой (также известных, как одностраничные сайты). Она позволяет создавать веб-сайты с полноэкранной прокруткой, а также добавлять горизонтальные ползунки для разделов сайта.

Более чем приветствуются ваши предложения, касающиеся не только функций и возможностей, но и улучшения стиля кодирования. Давайте вместе создадим замечательную библиотеку, чтобы облегчить жизнь пользователям!

fullPage.js полностью функционирует во всех современных браузерах, также, как и в некоторых устаревших, таких как Internet Explorer 9, Opera 12 и т.д. Работает в браузерах, имеющих и не имеющих поддержку CSS3, что обеспечивает идеальную совместимость с устаревшими браузерами. Обеспечивает поддержку сенсорного управления для мобильных телефонов, планшетов и компьютеров с сенсорным экраном.

Выражаем особую благодарность Browserstack за поддержку fullpage.js.

Если вы хотите использовать fullPage для разработки коммерческих сайтов, тем, проектов и приложений, то вам подойдёт коммерческая лицензия. С такой опцией ваш исходный код будет закрытым. Это значит, что вам не придётся менять весь исходный код вашего приложения на лицензию с открытым исходным кодом. [Приобретите Коммерческую лицензию Fullpage здесь]

Лицензия с открытым исходным кодом

Если вы создаёте приложение с открытым исходным кодом по лицензии, совместимой с Лицензией GNU GPL v3, вы можете использовать fullPage на условиях GPLv3.

Сведения об авторе в JavaScript и файлах CSS должны оставаться без изменений (даже после комбинации или минификации)

Как вы можете увидеть в файлах-примерах, вам необходимо будет включить:

• Файл JavaScript fullpage.js (или его минифицированную версию fullpage.min.js )
• Файл css fullpage.css

Опционально, при использовании css3:false вы можете добавить библиотеку jQuery UI, в случае если вы хотите использовать другие анимационные эффекты, в дополнение к включённым в библиотеку ( easeInOutCubic ).

Установка bower или npm

Опционально, вы можете установить fullPage.js с bower или npm согласно вашим предпочтениям:

Using Webpack, Browserify or Require.js? Check how to use fullPage.js with module loaders.

Опциональное использование CDN

Если вы предпочитаете использовать CDN для загрузки необходимых файлов, fullPage.js есть в CDNJS: https://cdnjs.com/libraries/fullPage.js

Начиная свой документ HTML, обязательно введите HTML DOCTYPE declaration в первой строке вашего HTML-кода. Иначе у вас могут возникнуть проблемы с вертикальным размером разделов. В приведённых примерах используется тип документа HTML 5 .

Каждый раздел будет определён элементом, содержащим класс section . Активный раздел по умолчанию будет являться первым разделом, то есть домашней страницей.

Разделы должны помещаться в обёрточный код (в данном случае —

Если вы хотите определить другую точку входа (не первый раздел или первый слайд раздела), просто добавьте класс active к разделу и слайду, которые вы хотите загружать в первую очередь.

Чтобы создать горизонтальный ползунок в разделе, каждый слайд должен определяться по умолчанию с помощью элемента, содержащего класс slide :

Источник