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

我刚发现这篇文章，花了几分钟时间玩代码才能让它发挥作用。这是我的咖啡脚本代码版本：

$(window).load(function(){
       $(document).scroll(function () {
        var scrollTop = $(window).scrollTop();
        var docHeight = $(document).height();
        var winHeight = $(window).height();
        var scrollPercent = scrollTop / (docHeight - winHeight);

        var divHeight = $("div").height(); 
        var divContentHeight = $('div')[0].scrollHeight;

        var equation = scrollPercent * (divContentHeight-divHeight);

        $('div').scrollTop(equation);

    });

});

/René

Answer 2

我不是这个旧问题，但也可以禁用父滚动条并允许iframe成为主滚动条。当然，只有设置宽度100％或100vw才有效。

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

然后将iframe设置为100 vw和（可选）100 vh

iframe由包含滚动条的父级100％控制，如下所示：

＆＃13;

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

＆＃13;

<iframe src="https://marketers.coop" style="min-width:100vw; min-height:100vh;">

＆＃13;

使用父滚动条滚动iFrame

2 个答案: