Witam,
https://codepen.io/suez/pen/gadLre
Chce uzyskać podobny efekt w pewnym fragmęcie fragmENcie większej strony.
Po wyłączaniu overflow: hidden cała strona jest scrollowana.
Jak byście sobie z tym poradzili?
0
3
Mateusz T napisał(a):
Jak byście sobie z tym poradzili?
Na początek poświęciłbym chwilę żeby zrozumieć jak ten efekt działa a widać, że:
- w JavaScript nie dzieje się nic istotnego poza nadawaniem kolejnym "stronom" odpowiednich klas aktywujących i deaktywujących CSS na onScroll oraz strzałki góra / dół;
- w HTML jest wszystko oczywiste - mamy jedynie kolejne pary stron zamkniętych w kontener z klasą: skw-page
- zatem istota kryje się w CSS.
Później bym ten CSS pooglądał i się skupił na tyle aby go zrozumieć. Po niedługim czasie wywnioskowałbym, że bez problemu da się to zaimplementować jako fragment większej całości.
Działa nawet jak "na pałę" wyciągniemy z codePena - całość w pliku HTML: https://jsfiddle.net/qwdy6ekL/2/
0
katakrowa czy możesz podpowiedzieć coś więcej jak to ugryźć?
Może jest jakiś poradnik albo skrypt z podobnym rozwiązaniem?
Celem jest zatrzymanie skrolowania strony na czas skrolowania tej sekcji?
katakrowa napisał(a):
Mateusz T napisał(a):
Jak byście sobie z tym poradzili?
Na początek poświęciłbym chwilę żeby zrozumieć jak ten efekt działa a widać, że:
- w JavaScript nie dzieje się nic istotnego poza nadawaniem kolejnym "stronom" odpowiednich klas aktywujących i deaktywujących CSS na onScroll oraz strzałki góra / dół;
- w HTML jest wszystko oczywiste - mamy jedynie kolejne pary stron zamkniętych w kontener z klasą: skw-page
- zatem istota kryje się w CSS.
Później bym ten CSS pooglądał i się skupił na tyle aby go zrozumieć. Po niedługim czasie wywnioskowałbym, że bez problemu da się to zaimplementować jako fragment większej całości.
Działa nawet jak "na pałę" wyciągniemy z codePena - całość w pliku HTML: https://jsfiddle.net/qwdy6ekL/2/
2
Scrollowanie możesz zatrzymać przechwytując zdarzenie onScroll i wykonując
event.preventDefault
Musisz sobie o tym poczytać. Metoda preventDefault() przerywa wszystkie domyślne akcje związane z danym odwoływalnym zdarzeniem.
W sytuacji dopóki nie jesteś na ostatnim slajdzie wywołujesz tą metodę przy wykryciu scrollowania w dół i analogicznie wywołujesz ją jeśli nie jesteś na pierwszym slajdzie scrollując w górę. Trzeba jeszcze wykryć czy kursor lub zdarzenia dotyku były w obszarze slidera czy poza.
Można to ogarnąć w tym fragmencie kodu:
$(document).on("mousewheel DOMMouseScroll", function (e) {
if (scrolling) return;
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
if ( [tu warunek] ) e.preventDefault();
navigateUp();
} else {
if ( [tu warunek] ) e.preventDefault();
navigateDown();
}
});