使用 owl 旋转木马查看最后一张幻灯片时启用垂直滚动

Question

我在移动设备上水平滑动轮播时禁用了网页的垂直滚动。我正在使用 Owl carousel.and 我使用了解决方案 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>

Answer 1

我像下面这样更改了我的代码，它工作正常，我解决了我的问题。

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

使用 owl 旋转木马查看最后一张幻灯片时启用垂直滚动

enable vertical scrolling while see the last slide using owl carousel

javascript

html

jquery

css

owl-carousel