enable vertical scrolling while see the last slide using owl carousel

Question

I disable vertical scrolling on webpage while swiping the carousel horizontally on mobile devices. I'm using the Owl carousel.and I used the solution Disable vertical scrolling while swiping on touch device using owl carousel in my site.it works well but it has a problem and when I see the last side in owl-carousel I can not scroll vertical to anywhere and I have to go back to the prev slide and then it works correctly and I can move on the page. how can solve this issue ? my website is https://khaaspo.com/Product/ProductDeialsInMob?Code=93&Code=93

$(document).ready(function() {  
    var owl2 = $('.owl-gallery');

    owl2.owlCarousel({
      rtl: true,
      margin: 10,
      nav: true,
      loop: false,
      navSpeed: 1000,
      pullDrag: false,
      freeDrag: false,
      autoplay: false,
      onDragged: function () {
          $('body').css('overflow', 'auto');
      },
      onDrag: function () {
          $('body').css('overflow', 'hidden');
      },
      responsive: {
          0: {
              items: 1
          },
          400: {
              items: 1
          },
          600: {
              items: 1
          },
          900: {
              items: 1
          }
      },
      onTranslate: function () {
          $('.owl-item').find('video').each(function () {
              this.pause();
              this.currentTime = 0;
          });
      }
    });

    owl2.on('drag.owl.carousel', function (event) {
        document.ontouchmove = function (e) {
        e.preventDefault();
    }  
   });

    owl2.on('dragged.owl.carousel', function (event) {
        document.ontouchmove = function (e) {
            return true;
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

`owl` is **not** `owl-carousel` – UninformedUser Jul 18 '20 at 08:55 — UninformedUser, Jul 18 '20 at 08:55

score 0 · Accepted Answer · answered Jul 19 '20 at 07:21

I changed my code like below and it works correctly and I solved my problem.

 var owl2 = $('.owl-gallery');
     owl2.owlCarousel({
      rtl: true,
      margin: 10,
      nav: true,
      loop: false,
      navSpeed: 1000,
      pullDrag: false,
      freeDrag: false,
      autoplay: false,
      onDragged: function () {
         $('body').css('overflow', 'auto');
      },
      onDrag: function (e) {
         var current = e.item.index + 1;
         var  total = e.item.count;
         if (current === total) {
            $('body').css('overflow', 'auto');
         }
         else {
            $('body').css('overflow', 'hidden');
         }

      },
      responsive: {
         0: {
            items: 1
         },
         400: {
            items: 1
         },
         600: {
            items: 1
         },
         900: {
            items: 1
         }

      },
      onTranslate: function () {
         $('.owl-item').find('video').each(function () {
            this.pause();
            this.currentTime = 0;
         });
        
      },
      
   });


owl2.on('drag.owl.carousel', function (e) {
   var current = e.item.index + 1;
   var total = e.item.count;
   document.ontouchmove = function (e) {
      if (current !== total) {
         e.preventDefault();
      }
      else {
         return true;
      }
   }


});


owl2.on('dragged.owl.carousel', function (event) {
   document.ontouchmove = function (e) {
      return true;
   }
});

enable vertical scrolling while see the last slide using owl carousel

1 Answers1