带有内部 iframe 问题的光滑滑块

Question

使用 Slick 滑块并在里面添加了 iframe，集成 iframe 后，滚动功能不起作用。如何解决问题并获得滚动？

给定下面的 HTML：

HTML：

<div class="smaller-cards">
    <div>
        <div class="content">
            <div class="mkt-val">
                <iframe src='https://someurl.com' frameborder='0'></iframe>
            </div>
        </div>
    </div>

    <div>
        <div class="content">
            <div class="mkt-val">
                <iframe src='https://....' frameborder='0'></iframe>
            </div>
        </div>
    </div>

    <div>
        <div class="content">
            <div class="mkt-val">
                <iframe src='https://....' frameborder='0'></iframe>
            </div>
        </div>
    </div>
</div>

JS：

$('.smaller-cards').slick({
    infinite: false,
    slidesToShow: 5,
    slidesToScroll: 3,
    variableWidth: true,
    arrows: false
});

Answer 1

在 iframe 元素上试试这个属性！更多信息在这里https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

pointer-events: none;