自動横スクロールするインラインフレーム（IFrame要素）

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

インラインフレーム（IFrame要素）内のHTMLドキュメントを自動横スクロールするJavaScriptサンプル。

サンプル（実装例）

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

  • このページを読み込むと、インラインフレーム（IFrame要素）内のHTMLドキュメントを、自動的に横スクロールする。
  • １つ目から３つ目のdiv要素ごとに、２秒間一時停止する。
  • 最後の３つ目のdiv要素までスクロールすると、１つ目のdiv要素を表示する位置まで急いでスクロールする。

ソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    setTimeout( "autoScroll()", 2000 );
}
var $scrollX = 0;
var $boxWidth = 300;
var $boxCounts = 3;
function autoScroll() {
    var $sampleIFrame = document.getElementById( "sampleIFrame" );
    if( $scrollX <= $boxWidth * ( $boxCounts - 1 ) ){
        $sampleIFrame.contentWindow.scrollTo( ++$scrollX, 0 );
        if( $scrollX % $boxWidth == 0 ){
            setTimeout( "autoScroll()", 2000 );
        }else{
            setTimeout( "autoScroll()", 10 );
        }
    }else{
        var $intervalID = setInterval(
            function(){
                scrollX( --$scrollX );
            },
            1
        );
        function scrollX( $scrollX ) {
            $sampleIFrame.contentWindow.scrollTo( $scrollX, 0 );
            if( $scrollX == 0 ){
                clearInterval( $intervalID );
                setTimeout( "autoScroll()", 2000 );
            }
        }
    }
}
</script>

HTML

<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, アニメーション, インラインフレーム, スクロール, 逆引き パーマリンク