0

Web ページのメイン コンテンツを表示するために使用する iframe があります。ただし、マウスがどこを指しているかに関係なく、IFRAME をスクロールさせたいと考えています。マウスが iframe の上にない限り、スクロールできないことでビジターを混乱させたくありません。これは可能ですか？マウスを本体の上に置いて iframe をスクロールするには?

関連するコードは < iframe>< /iframe> タグだけなので、コードはリンクしません。

(スクロールバーが非表示の場合、本文自体はスクロールできません)

4

1 に答える 1

0

大丈夫。これには、次の手順を含む、かなり迅速で汚いソリューションをまとめました。

  • 要素に「id」を追加します<iframe>。（私の例では、使用しましたid="myFrame"）
  • jQuery Mousewheelプラグインを最新の jQuery と共に HTML ページのヘッダーに添付します。


<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>


  • 最後に、次の JavaScript コードを html 本文の末尾またはiframe 自体の後に追加します。


<script type="text/javascript">
    var scrolloffset = 30;  // amount of scrolling per mousewheel step

    var myFrame = $('#myFrame');  // the iframe ID
    var frameScrollPosition = 0;

    $(window).mousewheel(function(event,delta){

        // reset stored offset so that it matches with iframe's
        frameScrollPosition = myFrame.contents().scrollTop();

        var frameHeight = myFrame.contents().height() - myFrame.height();

        if(delta > 0){
            var newPosition = frameScrollPosition - scrolloffset;
        } else {
            var newPosition = frameScrollPosition + scrolloffset;
        }

        if(newPosition < 0){
            newPosition = 0;
        }

        if(newPosition >= frameHeight){
            newPosition = frameHeight;
        }

        frameScrollPosition = newPosition;
        myFrame.contents().scrollTop(frameScrollPosition);

    });
</script>

プラグインをダウンロードして、私のように github から呼び出さないようにしてください。これは、テストと概念実証のためだけのものでした。

于 2013-02-15T21:56:34.207 に答える