Question

在本节的开头，我的网站受到了打击。仅卡在移动浏览器Website url中 https://creovana-217c6.firebaseapp.com

<section class="home-slider owl-carousel">
  <div class="slider-item" style="background-image: url(images/bg_1.jpg);">

    <div class="container-fluid">
      <div class="row slider-text align-items-center" >

        <div class="col-md-5 wrap col-sm-12 ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
          <h1 class="mb-4 mt-5" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">School Affairs Made Simpler by Vicasin Techies</h1>
          <p class="mb-4 mb-md-5 sub-p" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Digitalize your school with Daksha. Its so simple, secure and reliable</p>
          <!--<p><a href="#" class="btn btn-primary p-3 px-xl-5 py-xl-3">Get started</a> <a href="#" class="btn btn-primary btn-primary-2 p-3 px-xl-5 py-xl-3">Read more</a></p>
        --></div>
        <div class="col-md-7 ftco-animate">
            <img src="images/dashboard_full_1.png" class="img-fluid" alt="">
        </div>

      </div>
    </div>
  </div>


</section>

Answer 1

我使用Android版Chrome 70访问了您的网站。轮播上触摸时滚动无法正常工作。您可以通过将手指放在聊天图标上并向下滚动来进行测试，在这种情况下，它可以正常工作。

所以，您的问题似乎是这样的：

.owl-carousel.owl-drag .owl-item {touch-action: none;}

将其更改为：

touch-action: auto;

滚动功能有效，但现在用户也可以缩放。如果您不希望使用多指缩放，请将其更改为：

touch-action: pan-y;

Answer 2

我升级了owl_carousel版本，它起作用了。如果您使用的是旧版本，请更新至最新版本。 @Chris Elioglou所说的更改包含在最新版本中。

自举网站陷入了移动浏览器

2 个答案: