javascript - 动态内容的危险滑动问题

Question

我在一个容器上应用危险的滑动器滚动条插件，该容器的内容是用 ajax 动态加载的，我在调用 ajax 后初始化了插件，问题是在调整浏览器大小之前滚动不起作用。我已经用静态内容对其进行了测试，它工作正常，不需要调整窗口大小，但是一旦我切换到动态内容，滚动将无法工作，因为我调整了浏览器的大小。

这是初始化插件的方式

var mySwiper = new Swiper('.swiper-container', {
        scrollContainer: true,
        mousewheelControl: true,
        mode: 'vertical',            
        scrollbar: {
            container: '.swiper-scrollbar',
            hide: true,
            draggable: false
        }
    });  

这是html

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="searchList">
                //here's the dynamic content being loaded (a list of div elements)
            </div>
        </div>
    </div>
    <div class="swiper-scrollbar">
    </div>
</div>

swiper-container 高度为 100%

Answer 1

我找到了解决方案，我添加了这个我在第一次初始化插件后调用的函数

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.reInit();
  }, 500);
}

这个修复在另一个插件中被提及，当我用这个 swiper 插件尝试它时它起作用了。这与插件不知道 DOM 发生的变化有关。