ボタンクリックでスクロールするインラインフレーム（IFrame要素）

投稿日: 2014年3月11日 作成者: alphasis

ボタンクリックで、インラインフレーム（IFrame要素）内のHTMLドキュメントをスクロールするJavaScriptサンプル。

サンプル（実装例）

実装例（サンプル）の動作について

  • 「１」ボタンをクリックすると、背景色が薄い青色のdiv要素を表示する位置まで横スクロールする。
  • 「２」ボタンをクリックすると、背景色が黄色のdiv要素を表示する位置まで横スクロールする。
  • 「３」ボタンをクリックすると、背景色がピンク色のdiv要素を表示する位置まで横スクロールする。

ソースコード

JavaScript

<script type="text/javascript">
var $scrollX = 0;
function iframeController( $x ) {
    var $sampleIFrame = document.getElementById( "sampleIFrame" );
    if ( $scrollX < $x ){
        disabledButtons( true );
        var $intervalID = setInterval(
            function(){
                scrollX( ++$scrollX );
            },
            1
        );
    } else if ( $scrollX > $x ) {
        disabledButtons( true );
        var $intervalID = setInterval(
            function(){
                scrollX( --$scrollX );
            },
            1
        );
    }
    function scrollX( $scrollX ) {
        $sampleIFrame.contentWindow.scrollTo( $scrollX, 0 );
        if( $scrollX == $x ){
            clearInterval( $intervalID );
            disabledButtons( false );
        }
    }
}
function disabledButtons( $disabled ) {
    $buttons = document.getElementById( "iframeController" ).getElementsByTagName( "button" );
    for( var $i = 0; $i < $buttons.length; $i++ ) {
        $buttons[$i].disabled = $disabled;
    }
}
</script>

HTML

<p id="iframeController">
    <button onclick="iframeController( 0 );">１</button>
    <button onclick="iframeController( 300 );">２</button>
    <button onclick="iframeController( 600 );">３</button>
</p>
<iframe id="sampleIFrame" src="http://alphasis.info/wp-content/uploads/2014/02/javascript-sample-autoScroll-IFrame-width.html"></iframe>

CSS

<style>
#sampleIFrame {
    margin: 0;
    padding: 0;
    width: 300px;
    height: 300px;
    overflow: hidden;
    line-height: 1.5em;
    font-size: 16px;
    border: 1px solid gray;
    border-radius: 10px;
    background-color: yellow;
    text-align: center;
}
</style>

インラインフレーム内のHTMLドキュメント

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>サンプルページ</title>

<style>
body {
    margin: 0;
    padding: 0;
}
#sampleBox {
    width: 900px;
    height: 900px;
    text-align: center;
    font-size: 16px;
}
#sampleBox div {
    float: left;
    width: 300px;
    height: 300px;
    background-color: yellow;
}
</style>

</head>

<body>

<div id="sampleBox">
    <div style="background-color: lightblue;">
        １つ目
    </div>
    <div>
        ２つ目
    </div>
    <div style="background-color: pink;">
        ３つ目
    </div>
</div>
<div style="clear: left;"></div>

</body>

スポンサード リンク

カテゴリー: JavaScript, アニメーション, インラインフレーム, スクロール, 逆引き パーマリンク