[jQuery Html CSS] jak zakázat scroll stranky, když ?

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod dyžon 6. 4. 2020 07:03

zdravím všichni,
prosím o pomoc.
mám na stránkách swiper cowerflow (slideshow fotek).
když jsem se prokousal nastavením, tak jsem zjistil, že pro změnu fotky(posunutí) pomocí mmousewheel neexistuje tzv smooth přechod na další fotku, ale má funkce swiper.slideNext() a swiper.slidePrew, které smooth efect podporují.
odchytávám tedy na elementu #album pohyb kolečka a swiper funkce volám podle toho, kam se kolečko pohne.
funguje to, akorát je problém, že když pohnu na #album kolečkem tak se sice přejde na další fotku, ale zároveň se i provede scroll celé stránky. a to bych právě potřeboval zakázat.
prostě když budu na #album, tak aby fungoval scroll jen v tom divu a stránka zůstala na místě,
nebo ještě líp, aby když se přejede na poslední fotku, povolil se scroll stránky dolu a když je na první fotce, povolil se scroll stránky nahoru;
HTML:
Kód: Vybrat vše
// nějaký code
            <div id="album" class="swiper-container">
                  <div class="swiper-wrapper">
                      <div class="swiper-slide">
                          <div class="kartaFotky">
                              <div class="popisFotky">fotka 1</div>
                              <img class="fotka" src="~/Content/_myOwnImages/album/fotka1.jpg" />
                          </div>
                      </div>
                      <div class="swiper-slide">
                          <div class="kartaFotky">
                              <div class="popisFotky">fotka 2</div>
                              <img class="fotka" src="~/Content/_myOwnImages/album/fotka2" />
                          </div>
                      </div>
                      <div class="swiper-slide">
                          <div class="kartaFotky">
                              <div class="popisFotky">fotka 3</div>
                              <img class="fotka" src="~/Content/_myOwnImages/album/fotka3.jpg" />
                          </div>
                      </div>
                      <div class="swiper-slide">
                          <div class="kartaFotky">
                              <div class="popisFotky">fotka 4</div>
                              <img class="fotka" src="~/Content/_myOwnImages/album/fotka4.jpg" />
                          </div>
                      </div>
                      <div class="swiper-slide">
                          <div class="kartaFotky">
                              <div class="popisFotky">fotka 5</div>
                              <img class="fotka" src="~/Content/_myOwnImages/album/fotka5.jpg" />
                          </div>
                      </div>
                  </div>
               </div>
// další code

Jquery
Kód: Vybrat vše
        var album = document.getElementById("album");
        album.addEventListener("mousewheel", posunFotku, false);
        album.addEventListener("DOMMouseScroll", posunFotku, false);

        function posunFotku(smer) {
            var smer = window.event || smer;
            var delta = Math.max(-1, Math.min(1, (smer.wheelDelta || -smer.detail)));
            if (delta < 0) {
                swiper.slideNext();
                console.log("do prava");
            }
            else {
                swiper.slidePrev();
                console.log("do leva");
            }
            return false;
        }

ještě upřesním, že fotky ve slidu jsou umístěny horizontálně, pohybují se z prava do leva.
nějakej nápad prosím ??
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod dyžon 6. 4. 2020 09:52

tak zatím jsem to upravil takhle:
Kód: Vybrat vše
$('#album').bind('mousewheel DOMMouseScroll', function (e) {
        var scrollTo = null;

        if (e.type == 'mousewheel') {
            scrollTo = (e.originalEvent.wheelDelta * -1);
            console.log("google: " + scrollTo);
        }
        else if (e.type == 'DOMMouseScroll') {
            scrollTo = 40 * e.originalEvent.detail;
            console.log("firefox: " + scrollTo);
        }

        if (scrollTo) {
            e.preventDefault();
            $(this).scrollTop(scrollTo + $(this).scrollTop());
            if (scrollTo > 0) {
                swiper.slideNext();
                console.log("do prava");
            }
            else {
                swiper.slidePrev();
                console.log("do leva");
            }
        }
    });

tady zatím scrolování po dosažení 1. a posledního prvku nepokračuje ve scrolování stránky, a popravdě u toho asi zůstanu, každopádně jde odchytit, kterej prvek se má posunout a v případě prvního, nebo posledního nevolat prevendDefault;

-- 6. 4. 2020 10:20 --

a tady je varianta, kdy se po projetí všech fotek v albu pokračuje ve scrolování stránky:
Kód: Vybrat vše
$('#album').bind('mousewheel DOMMouseScroll', function (e) {
        var scrollTo = null;
        var pocetFotek = 10;

        if (e.type == 'mousewheel') {
            scrollTo = (e.originalEvent.wheelDelta * -1);
        }
        else if (e.type == 'DOMMouseScroll') {
            scrollTo = 40 * e.originalEvent.detail;
        }

        if (scrollTo) {
           
            if (scrollTo > 0) {
                swiper.slideNext();
            }
            else {
                swiper.slidePrev();
            }
           
            if (swiper.realIndex != 0 && swiper.realIndex != pocetFotek - 1) {
                console.log(swiper.realIndex);
                e.preventDefault();
                $(this).scrollTop(scrollTo + $(this).scrollTop());
            }
        }
    });
AMD FX-6300; Gigabyte 970A-DS3P; DDR3 8192MBytes; AMD Radeon HD 6700 Series
dyžon
Junior
Uživatelský avatar

Odeslat příspěvekod Emil Pastelka 7. 4. 2020 10:45

Osobně bych to řešil zakázáním scroll na body po najetí myší na element slideru. Inspirace viz https://css-tricks.com/prevent-page-scr ... l-is-open/
Emil Pastelka
Junior
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků