色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

水平滾動在Swiper內的移動Web查看器上不起作用

CSS
方一強1年前7瀏覽0評論

我使用swiper-js(https://swiperjs.com/)來滑動幾個容器。在我的容器里，我儲存了一個水平滾動滑塊的小盒子。我可以在桌面上正確地滑動它們，但不能在移動網絡瀏覽器上滑動。所以是的，我需要一些幫助。

new Swiper(document.querySelector("div.swiper-container"), {
    direction: "horizontal",
    speed: 300,
    spaceBetween: 5,
    slidesPerView: 1,
    loop: false,
    cssMode: false,
    allowSlideNext: true,
    allowSlidePrev: true,
    centeredSlides: true,
    centeredSlidesBounds: true,
    updateOnWindowResize: true,
    centerInsufficientSlides: true,
    pagination: {
        el: document.querySelector("div.swiper-pagination"),
        clickable: true,
        hideOnClick: false,
        dynamicBullets: true
    },
    navigation: {
        nextEl: document.querySelector("div.swiper-button-next"),
        prevEl: document.querySelector("div.swiper-button-prev"),
        hideOnClick: false
    }
});
$('*').bind('touchmove', false);

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display:    -moz-box;
    display: -webkit-flex;
    display:  -ms-flexbox;
    display:         flex;
    -webkit-justify-content: center;
       -moz-justify-content: center;
            justify-content: center;
    -webkit-align-items: center;
            align-items: center;
} div.swiper-container {
    height: 75%;
    width: 90%;
} div.swiper-wrapper, div.swiper-slide {
    height: 100%;
    width: 100%;
} container {
    height: 100%;
    width: 100%;
    background-color: green;
    display: -webkit-box;
    display:    -moz-box;
    display: -webkit-flex;
    display:  -ms-flexbox;
    display:         flex;
    -webkit-justify-content: center;
       -moz-justify-content: center;
            justify-content: center;
    -webkit-align-items: center;
            align-items: center;
} container div {
    height: 50%;
    width: 50%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
} box {
    height: 100%;
    width: 95%;
    background-color: red;
    display: inline-block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
    <link rel="stylesheet" >
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <container>
                    <div>
                        <box></box>
                        <box></box>
                        <box></box>
                    </div>
                </container>
            </div>
            <div class="swiper-slide">
                <container>
                    <div>
                        <box></box>
                        <box></box>
                        <box></box>
                    </div>
                </container>
            </div>
            <div class="swiper-slide">
                <container>
                    <div>
                        <box></box>
                        <box></box>
                        <box></box>
                    </div>
                </container>
            </div>
        </div>
    </div>
</body>
</html>

在你的腳本中添加下面的代碼，這將在移動和。桌面

$('*').bind('touchmove', false);

試著在你的css中添加這個

.div.swiper-container{
  touch-action: pan-y;
}