jquery - 使用父滚动条滚动 iFrame

Question

我想使用父滚动条滚动高 iframe。

问题:我需要条形按百分比而不是按像素移动。这将允许两个条同时触及底部。

$(document).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var docHeight = $(document).height();
    var winHeight = $(window).height();
    var scrollPercent = (scrollTop) / (docHeight - winHeight);
    var scrollPercentRounded = Math.round(scrollPercent * 100);

    var divscrollTop = $(window).scrollTop();
    var divdocHeight = $(document).height();
    var divwinHeight = $(window).height();
    var divscrollPercent = (divscrollTop) / (divdocHeight - divwinHeight);
    var divscrollPercentRounded = Math.round(divscrollPercent * 100);

    $('div').scrollTop((scrollPercentRounded * divscrollPercentRounded));

});

工作示例 http://jsfiddle.net/RyanBrackett/xcw1yokm/

Answer 1

我不，这是一个老问题，但也可以禁用父滚动条并允许 iframe 成为主滚动条。当然，这仅在您可以设置宽度 100% 或 100vw 时才有效。

在这种情况下，我们可以将所有元素的边距设置为 0px，并将溢出设置为隐藏在包含父级的元素上。

然后将 iframe 设置为 100 vw 和(可选)100 vh

iframe 然后 100% 由包含滚动条的父级控制，如下所示:

    <style>
        * { margin:0px; }
        body {overflow:hidden;}
    </style>

<iframe src="https://network.tactokens.com" style="min-width:100vw; min-height:100vh;">