0

Здрасте. У меня в проекте есть поблочная прокрутка (использую библиотеку fullPage). И есть блок, при свайпе по которому выводиться alert. Но при свайпе по блоку, так же листается и страница. так вот задача: как при свайпе по блоку, заблокировать прокрутку страницы. Если это не возможно с этой библиотекой, посоветуйте другую или реализацию на JavaScript (jQuery). А так же С Новым Годом!

1 ответ 1

0

Очень сложно полностью понять вопрос без примера кода. Попробуйте дополнить вопрос кодом как в ответе ниже и тогда будет возможность скорректировать ответ.

А пока возможно Вам будет достаточно примера из "книжки" Обратите внимание на нижеследующие функции:

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.