滑动可拖动滚动条在火狐中不起作用

Question

我有一个使用滑动器的轮播，它是可拖动的滚动条功能。这在chrome，Internet Explorer和Microsoft Edge中工作正常。不过，它在火狐中不起作用。如果单击滚动条并拖动，则没有任何反应。

我不确定这是否是我的代码中阻止了这种情况，或者它是否是一个 Firefox 错误，或者是否有任何解决方法？

你可以在这里看到它——

http://psc.website.2018.360southclients.net:8080/index.php?#scroll

该链接将直接带您进入滚动条，该网站仍在开发中。

这是 HTML

<div class="row events">
        <div class="col-md-12 fixed-width">
            <div class="row">
                <div class="col-md-4 text-right">
                    <h2>Upcoming<br /> Events</h2>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-7"></div>
            </div>
        </div>
        <div class="events-holder">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">31 Mar</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">21 Jun</p>
                            <h3>Weekend Workshop</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">10 Jul</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">31 Aug</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">21 Sep</p>
                            <h3>Weekend Workshop</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">10 Nov</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">21 Sep</p>
                            <h3>Weekend Workshop</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">10 Nov</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">21 Sep</p>
                            <h3>Weekend Workshop</h3>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <div class="image">
                            <a href=""><img src="/images/test-event-01.jpg" width="428" height="630" alt="Testing" /></a>
                        </div>
                        <a class="text">
                            <p class="date">10 Nov</p>
                            <h3>Public lecture by Victor Edmund</h3>
                        </a>
                    </div>
                </div>
            </div>
            <div class="row pagination-holder">
                <div class="col-md-3 text-right">Today</div>
                <div class="col-md-6">
                    <div class="swiper-scrollbar"></div>
                </div>
                <div class="col-md-3 text-left">Upcoming</div>
            </div>
        </div>
    </div>

CSS：

section.info-station .events-holder{margin-top:60px;padding-bottom:100px}
section.info-station .events-holder .swiper-container{width:100%;height:auto;z-index:250}
section.info-station .events-holder .swiper-container .swiper-wrapper{left:calc(20% - 14px)}
section.info-station .events-holder .swiper-container .swiper-wrapper::after{content:'';display:block;clear:both}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide{width:20%;background:#1d2f35;margin:0 30px 30px 0;overflow:hidden;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .image{width:100%;height:auto;display:block;opacity:.25;overflow:hidden;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .image img{width:100%;height:auto}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .text{position:absolute;width:100%;height:auto;bottom:0;padding:30px}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .text .date{font-family:'UniformBold-Regular';font-weight:300;font-size:19px;text-transform:uppercase;color:#ef4244}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .text h3{font-size:32px;text-transform:none;color:#fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide .text h3{color:#fff}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide:hover .text h3{color:#ef4244}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide-active{-webkit-border-bottom-right-radius:55px;-moz-border-radius-bottomright:55px;border-bottom-right-radius:55px;-webkit-box-shadow:0 0 30px 0 rgba(0,0,0,.25);-moz-box-shadow:0 0 30px 0 rgba(0,0,0,.25);box-shadow:0 0 30px 0 rgba(0,0,0,.25)}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide-active .image{opacity:1}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide-active .text{padding:30px 50px 30px 30px}
section.info-station .events-holder .swiper-container .swiper-wrapper .swiper-slide-active .text h3{font-size:50px}
section.info-station .events-holder .pagination-holder{position:relative;font-family:'UniformBold-Regular';font-weight:300;font-size:19px;text-transform:uppercase;color:#1d2f35;margin-top:30px}
section.info-station .events-holder .pagination-holder .swiper-scrollbar{width:calc(100% - 30px);height:24px;margin:0 15px;background:none}
section.info-station .events-holder .pagination-holder .swiper-scrollbar::before{content:'';position:absolute;top:50%;left:0;width:100%;height:2px;background:#1d2f35}
section.info-station .events-holder .pagination-holder .swiper-scrollbar .swiper-scrollbar-drag{background:#ef4244;border-radius:0;height:10px;top:8px}

jquery：

var calcWidth = ($('body').width() * 0.2 - 24);
    var swiperEvents = new Swiper('.events-holder .swiper-container',{
        width:calcWidth,
        slidesPerView:1,
        scrollbar:{
            el:'.events-holder .swiper-scrollbar',
            snapOnRelease:true,
            draggable:true
        }
    });

我正在使用刷卡器 4.1.0。

任何帮助将不胜感激！

Answer 1

我找到了解决方法。我不得不从刷卡器中讨论以下内容：

swiper.scrollbar.dragEvents = (function dragEvents() {
      //if ((swiper.params.simulateTouch === false && !Support.touch)) {
        return {
          start: 'mousedown',
          move: 'mousemove',
          end: 'mouseup',
        };
      //}
      return touchEvents;
    }());