'Using Parent Scrollbar to scroll iFrame

I want to use the parent scroll-bar to scroll a tall iframe.

The problem: I need the bars to move in terms of percentage instead of per pixel. That would allow both bars to touch the bottom at the same time.

$(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));

});

Working example http://jsfiddle.net/RyanBrackett/xcw1yokm/

jqueryiframescrollbar


Solution 1:[1]

I no this is an old question, but one could also just disable the parent scrollbar and allow the iframe to be the main scrollbar. Of course this only works if you can set width 100% or 100vw.

In such a case one can instead just set the margin of all elements to 0px and overflow to hidden on containing parent.

Then set iframe to 100 vw and (optionally) 100 vh

The iframe is then 100% controlled by the parent containing scrollbar as seen below:

    <style>
        * { margin:0px; }
        body {overflow:hidden;}
    </style>
<iframe src="https://network.tactokens.com" style="min-width:100vw; min-height:100vh;">

Solution 2:[2]

I just found this post and spend a few minutes playing with the code to make it work. Here's a my version of the coffee-script-code:

$(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é

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 René Truelsen

Related Questions