• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przewijanie strony z jednego diva do drugiego za pomocą scrolla

Aruba Cloud - Virtual Private Server VPS
0 głosów
1,289 wizyt
pytanie zadane 11 marca 2018 w HTML i CSS przez DreaM Użytkownik (840 p.)
Witam. Chciałbym stworzyć stronę na której będzie przewijanie strony za pomocą scrolla z diva do diva.

 

Można zobaczyć to tutaj: http://jsfiddle.net/vaibviad/JqU2T/8/

Jest tam trochę to opisane lecz zbytnio tego nie rozumiem i skrypt po prostu mi nie działa.

Potrzebowałbym poradnika angielskiego/polskiego lub gotowych plików dla strony, które sam mógłbym przejrzeć, może z tych plików bym się tego nauczył.

4 odpowiedzi

0 głosów
odpowiedź 11 marca 2018 przez lateM Pasjonat (17,660 p.)
A jQuery podpiąłeś? Musi działać :)

Btw. Pamiętaj, żeby najpierw podpiąć bibliotekę, a potem własne skrypty.
0 głosów
odpowiedź 11 marca 2018 przez pablop76 VIP (123,540 p.)

Szukaj scrollTo. Np.to

0 głosów
odpowiedź 11 marca 2018 przez DreaM Użytkownik (840 p.)

Mam ogólnie w folderze ze stroną 3 pliki:

index.html

<!DOCTYPE HTML> 
<html>
	<head>
		<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
		<meta charset="utf-8">
		<link rel='stylesheet' href='style.css'>
		<link rel='stylesheet' href='css/fontello.css'>
		<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
		<script type="text/javascript" src="test.js">
		</script>
	</head>
	<body>
		<div class="mydiv" style="text-align:center; color:green">Gallery</div>
		<div class="mydiv" style="background-color: #aaa">Page 1</div>
		<div class="mydiv" style="background-color: #444">Page 2</div>
		<div class="mydiv" style="background-color: blue">Page 3</div>
		<div class="mydiv" style="background-color: #ccc">Page 4</div>
		<div class="mydiv" style="background-color: yellow">Page 5</div>
	</body>
</html>

style.css

html, body, body>div {
    height:100%;
    color:yellow;
}

test.js

$(document).ready(function () {
    var divs = $('.mydiv');
    var dir = 'up'; // wheel scroll direction
    var div = 0; // current div
    $(document.body).on('DOMMouseScroll mousewheel', function (e) {
        if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
            dir = 'down';
        } else {
            dir = 'up';
        }
        // find currently visible div :
        div = -1;
        divs.each(function(i){
            if (div<0 && ($(this).offset().top >= $(window).scrollTop())) {
                div = i;
            }
        });
        if (dir == 'up' && div > 0) {
            div--;
        }
        if (dir == 'down' && div < divs.length) {
            div++;
        }
        //console.log(div, dir, divs.length);
        $('html,body').stop().animate({
            scrollTop: divs.eq(div).offset().top
        }, 200);
        return false;
    });
    $(window).resize(function () {
        $('html,body').scrollTop(divs.eq(div).offset().top);
    });
});

Czego mi brakuje? Co powinienem dodać/dopisać i gdzie?

1
komentarz 11 marca 2018 przez Bazinga Bywalec (2,120 p.)
edycja 11 marca 2018 przez Bazinga

W kodzie HTML, musisz załączyć bibliotekę Jquery żeby to działało. W 10 linijce, przed test.js.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" >
		</script>

 

Taka mała uwaga. Zwykle na codepen, czy  jsfiddle jest podpięta jakaś biblioteka. W tym przykładzie co podałeś , informacja ta znajduje na samej górze pola z kodem javascript:

 


 

0 głosów
odpowiedź 11 marca 2018 przez DreaM Użytkownik (840 p.)
Ok teraz działa ale niestety ten skrypt działa chyba niepoprawnie gdyż czasami przestaje działać i normalnie się przesuwa.

Chciałbym jeszcze usunąć pasek przewijania:

<body style="overflow-y:hidden;">

ale gdy to zrobię to strona czasami się zacina w połowie drugiego diva i nie mogę bardziej przesuwać w dół.

Ma ktoś na to rozwiązanie czy już lepiej zostawić ten pasek przewijania z boku strony?

Podobne pytania

0 głosów
1 odpowiedź 314 wizyt
pytanie zadane 24 sierpnia 2018 w HTML i CSS przez YakumoPL Obywatel (1,970 p.)
0 głosów
5 odpowiedzi 1,714 wizyt
pytanie zadane 4 listopada 2015 w HTML i CSS przez grze848 Początkujący (480 p.)
0 głosów
0 odpowiedzi 278 wizyt

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,663 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...