Здрасте. У меня в проекте есть поблочная прокрутка (использую библиотеку fullPage). И есть блок, при свайпе по которому выводиться alert. Но при свайпе по блоку, так же листается и страница. так вот задача: как при свайпе по блоку, заблокировать прокрутку страницы. Если это не возможно с этой библиотекой, посоветуйте другую или реализацию на JavaScript (jQuery). А так же С Новым Годом!
1 ответ
Очень сложно полностью понять вопрос без примера кода. Попробуйте дополнить вопрос кодом как в ответе ниже и тогда будет возможность скорректировать ответ.
А пока возможно Вам будет достаточно примера из "книжки" Обратите внимание на нижеследующие функции:
onLeave (index, nextIndex, direction)
- Этот обратный вызов активируется, когда пользователь покидает раздел, при переходе к новому разделу. Возврат false
отменит переход до его осуществления. Можно так же использовать moveSectionUp()
или moveSectionDown()
для возврата к предыдущему слайду, это тоже может быть эффектным.
setAllowScrolling(логическая операция, [направления])
- Даёт или убирает возможность скроллинга разделов/слайдов с помощью колеса мыши/трекпада или сенсорных жестов(включено по умолчанию). Обратите внимание, что функция не деактивирует скроллинг с помощью клавиатуры. Для этого вам потребуется использовать setKeyboardScrolling
.
Отключение прокрутки, например для body {overflow: hidden;}
.
Надеюсь этой информации будет достаточно чтоб Ваш код был исправлен таким образом, что приведёт к требуему результату.
new fullpage('#fullpage', {
licenseKey: 'xxxxxxxx-xxxxxxxx-xxxxxxxx-xxxxxxxx',
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
});
//adding the actions to the buttons
document.getElementById('turnOff').addEventListener('click', function(){
fullpage_api.setAllowScrolling(false);
fullpage_api.setKeyboardScrolling(false);
});
document.getElementById('turnOn').addEventListener('click', function(){
fullpage_api.setAllowScrolling(true);
fullpage_api.setKeyboardScrolling(true);
});
.section {
text-align:center;
font-size: 3em;
}
/**
Fixed button outside the fullpage.js wrapper
*/
#turnOff,
#turnOn{
position:fixed;
z-index:999;
font-size: 2em;
cursor:pointer;
top: 20px;
}
#turnOff{
left: 20px;
}
#turnOn{
left: 240px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.css" integrity="sha512-1No3nMY/zD37h1POyqULfwc9WMzWvXcal6F7/OIhNdWkTaEbt4Y6eqX0vXail7Zh5JjnBdMMKr+lRvqTNFr3Ow==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.js" integrity="sha512-eH2N2Zt2AeLuFlFvRSEeZcVeAESY+8nfIqhxx0XXEou6w/G4lLY3K8UKNYqi6e1pLXDduVF1KF/lbyxy3+X6OA==" crossorigin="anonymous"></script>
<button id="turnOff">Not allow</button>
<button id="turnOn">Allow</button>
<div id="fullpage">
<div class="section">One</div>
<div class="section">
<div class="slide" data-anchor="slide1">Two 1</div>
<div class="slide" data-anchor="slide2">Two 2</div>
</div>
<div class="section">Three</div>
<div class="section">Four</div>
</div>