Search code examples
javascripthtmljquerycssowl-carousel

enable vertical scrolling while see the last slide using owl carousel


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>


Solution

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