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

[dyžon]

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 ??

[dyžon]

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());
            }
        }
    });

[Emil Pastelka]

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/