Slick.js 在移动设备上显示滚动条

如何解决Slick.js 在移动设备上显示滚动条

Slick.js 滑块在移动设备上显示滚动条，允许向下滚动页面。一切都在桌面上 100% 工作，即使浏览器窗口被压缩到 800 像素以下，激活移动布局。我曾尝试更改 position 和 display 设置但无济于事。我有一种感觉，这可能与 iOS 上的 Safari 相关？请参阅下面的 GIF 以获得直观的解释。

GIF 视觉效果

HTML

<body>
                
<div id="mob-menu" class="mobile-nav">
    <div id="hn-but"><a href="index.html"><p>Hannah Neville</p></a></div>
    <div id="men-but"><a href="#" id="menu-open" class="showhide"><span>Menu</span></a></div>
    <div><a href="#" id="info-mob"><i class="fa fa-info"></i></a></div>
    <div id="title-but"><a href="#"><p>Herbal Essences</p></a></div>            
    <div><a href="#" id="dark-btn" onclick="darkmode()"><i class="fa fa-circle"></i></a></div>
</div>    

<div class="image-slider">
    <div class="image-div"><img class="image" src="assets/herbal-essences/Herbal-Essences1.png"></div>
    <div class="image-div"><img class="image" src="assets/herbal-essences/Herbal-Essences2.jpg"></div>
    <div class="image-div"><video id="he-vid" class="video" autoplay muted loop><source src="assets/herbal-essences/Herbal-Essences3.mp4" type="video/mp4">Your browser does not support the video tag.</video></div>
</div>

</body>

CSS

* {
  padding: 0;
  margin: 0;
  Box-sizing: border-Box;
}

.image-slider {
    height: 100%;
    width: 100vw;
    margin: 0 0;
    padding: 0 0;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
    overflow-y: hidden;
}

img,video {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.image,.video {
    max-height: calc(100vh - 15rem);
    max-width: calc(100vw - 2.5rem);
    margin: 0 auto; /* it centers any block level element */
    width: auto;
    height: auto;
}

/* Slick Image Slider */    
    
$('.image-slider').slick({
    infinite: true,speed: 500,fade: true,cssEase: 'linear',arrows: false,swipe: true,});
    
$('#prev').click(function() {
    $('.image-slider').slick('slickPrev');
  });
    
$('#next').click(function() {
    $('.image-slider').slick('slickNext');
  });

解决方法

像这样在 body 标签上设置 overflow: hidden;：

用于右侧和底部滚动：
```
 body {
     overflow: hidden;
 }
```
仅用于右侧滚动：
```
 body {
     overflow-y: hidden;
 }
```
仅用于底部滚动：
```
 body {
     overflow-x: hidden;
 }
```

在您的情况下，在全局或标题部分应用第二个选项。

希望这对你有用。

试试

.slick-slide
{
    height: inherit !important;
}