javascript - HTML と JavaScript - ある要素から別の要素にスクロール アクションを渡す

Question

2 つの div があるとします。

<div id="control"></div>
<div id="view">(A scrollable list)</div>

#controlそして、カーソルが中に駐車され、マウスホイールがスクロールさ#viewれると、代わりにスクロールされるようにしたいと思います。とにかくこれを達成するには？

Answer 1

Okay, quick fix that worked for me. Even though the fixed div is not scrollable, as it has no content to overflow its bounds, you can still detect mousewheel events. mousewheel events contain deltas for the x/y dimensions scrolled.

Note: This works for mice or track-pads, and will give you the proper direction (-/+), regardless of inverted Y-Axis settings (read: Apple's (un)natural scrolling)

Therefore, you can do something like this:

var fixedDiv = document.querySelector('.my-fixed-div');
var scrollableDiv = document.querySelector('.my-scrollable-list');

fixedDiv.addEventListener('mousewheel', function (e) {
    e.preventDefault();
    scrollableDiv.scrollTop += e.deltaY;
});

Answer 2

これをテストしましたが、要素でイベントを達成できる唯一の方法はonscroll、「フローティング」するアクティブなスクロールバーを使用することです。フロートの説明 : 位置は上から 100px で、スクロールしたときに上下したかどうかを確認してから、元の位置に戻します。そのため、アクティブなスクロール バーが必要であることを覚えておいてください (要素の内部コンテンツはそれ自体よりも高くする必要があります。複数使用することもできます<br>...)。

Javascript コード:

<script type="text/javascript">
        var defaultScrollTop = 100; /* testing value */

        window.onload = function() {
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");

            div1.scrollTop = defaultScrollTop; // Initialize to float

            div1.onscroll = function(event) {
                if (defaultScrollTop < div1.scrollTop) {
                    div2.scrollTop += 100; //scrollDown
                } else if (defaultScrollTop > div1.scrollTop) {
                    div2.scrollTop -= 100; //scrollUp
               }

               div1.scrollTop = defaultScrollTop;                
            }
        }
    </script>

CSS:

<style>
    #div1, #div2 {
        max-height: 100px; /* For testing */
        overflow-y: scroll;
    }
</style>

したがって、内部をスクロールdiv1すると、上下にスクロールされたかどうかがチェックされ、上下にスクロールされ、 div2div1 がデフォルトのスクロール値に設定されます。このトリックが役立つことを願っています。

PS：調査を行うと、スクロールバーを非表示にすることができます（overflow:hiddenアクティブなスクロールバーがないため機能しません）

Answer 3

これはあなたを助けるかもしれません：

ドキュメントには、その機能 onscroll があります。

document.onscroll=moveSetting;

スクロールdiv1すると、マウスポインターが にあるはずdiv2です。したがって、マウスが div2 にある場合にのみ
実行する必要があります。scFunc()これを達成するには

function moveSetting(evt)
{       var div2Obj=document.getElementById('div2');
        var width=div2Obj.style.width;
        var border=div2Obj.style.border;
       var x=evt.pageX,y=evt.pageY,
       var leftChk=div2Obj.offsetLeft;
       var topChk=div2Obj.offsetTop;
        if(x>=leftChk && x<=(leftChk+width+border*2) && y>=topChk && y<=(topChk+width+border*2)) {
                scrollFunc();       
    }


}

var i,j;
    function scrollFunc() {
       var i=document.getElementById('div1').scrollTop;

       i++;
       i=j-1;

       document.getElementById('div1').scrollTop=i;
       /* manage your code yourself to scroll div1 from here */
    }

Answer 4

最後の例を見てください -->

http://api.jquery.com/scroll/