Question

我创建了一个由iframe组成的网页。我想使用浏览器滚动条滚动iframe内容。这是我的代码：

zoomIn

点击{{1}}按钮，我希望iframe中的内容增加其大小。 iframe中不应该有任何滚动条，但滚动应该由浏览器完成。

Answer 1

<iframe src = 'demo.html' id ='sd' frameBorder='0' scrolling = 'no' height = '100%' width = '100%'>

在你的css中

iframe { overflow:hidden; }

Answer 2

在缩放时使用浏览器滚动条滚动iframe内容的方法之一是获取iframe内容的高度和宽度，并相应地更改iframe和父主体的高度。以下是代码

$("document").ready(function(){
$("#zoomIn").click(function(){
    var zoomValue = 5;
    css = 'transform: scale(' + zoomValue+ ');';
    css += '-webkit-transform: scale(' + zoomValue + ');';
    css += '-moz-transform: scale(' + zoomValue + '); ';
    css += '-o-transform: scale(' + zoomValue  + ');';
    css += 'transform-origin: left top;';
    css += '-webkit-transform-origin: left top;';
    css += '-moz-transform-origin: left top; ';
    css += '-ms-transform-origin: left top;';
    var innerBody = $("iframe").contents().find("body");
    innerBody.attr({style:css});
    $("body").css({
        'height': innerBody[0].getBoundingClientRect().height + 'px',
        'width': innerBody[0].getBoundingClientRect().width + 'px'
    });
    $("iframe").css({
        'height': innerBody[0].getBoundingClientRect().height + 'px',
        'width': innerBody[0].getBoundingClientRect().width + 'px'
    });
});

}）;

如何使用浏览器的滚动条滚动iframe的内容？

2 个答案: