3

スクロールバー付きの 3 つの div があります。div 1 でスクロールする場合、div 2 と 3 を反対方向にスクロールします。スクロールされる距離は、div 1 の距離の半分である必要があります。

これは私が今持っているものです（小さな部分、残りはjsfiddleにあります）。これは1 divで機能します。

$("#textBox1").scroll(function () {
        console.log("scroll 1");
        var offset = $("#textBox1").scrollTop() - scrollPosTBox1;
        var half_offset = offset/2.0;

        disable1 = true;

        if(disable2 == false) {
            $("#textBox2").scrollTop(scrollPosTBox2 - half_offset);
        }
        if(disable3 == false) {
            $("#textBox3").scrollTop(scrollPosTBox3 - half_offset);
        }    
        disable1 = false;


    });

ただし、他の 2 つの div で同じものを取得しようとすると、何もスクロールできなくなります。これは、たとえば、div 1 が div 2 をトリガーし、div 2 が div 1 にトリガーするためです。無効化コードでこれを修正しようとしましたが、役に立ちません。

誰かが私を助けることができますか？

http://jsfiddle.net/XmYh5/1/

4

3 に答える 3

3

@EmreErkan と @Simon の努力に敬意を払わないでください。これのノークリックバージョンです。

var $boxes = $("#textBox1,#textBox2,#textBox3"),
    active;

$boxes.scrollTop(150);

// set initial scrollTop values
updateScrollPos();

// bind mouseenter: 
// 1) find which panel is active 
// 2) update scrollTop values

$boxes.mouseenter(function () {
    active = this.id;
    updateScrollPos();
});

// bind scroll for all boxes
$boxes.scroll(function (e) {

    $this = $(this);

    // check to see if we are dealing with the active box
    // if true then set scrolltop of other boxes relative to the active box
    if(this.id == active){

        var $others = $boxes.not($this),
            offset = $this.scrollTop()-$this.data("scroll"),
            half_offset = offset / 2;

        $others.each(function(){
            $this = $(this);
            $this.scrollTop($this.data("scroll") - half_offset);
        });
    }

});

// utility function: 
// assign scrollTop values element's data attributes (data-scroll)

function updateScrollPos() {
    $boxes.each(function(){
        $this = $(this);
        $this.data("scroll",$this.scrollTop());
    });
}

フィドル

于 2013-03-11T17:25:54.577 に答える
1

最終的にこれに対する動的な解決策を得ましたが、思ったよりも複雑でしたが、私はそれを手に入れたと思います:

http://jsfiddle.net/XmYh5/14/

var initialTop = 150,
    factor = 2;

    $(".textBox")
        .addClass('disabled')
        .scrollTop(initialTop)
        .on('scroll', function () {
            var $this = $(this);

            if(!$this.is('.disabled')) {
                this.lastOffset = this.lastOffset || initialTop;

                var offset = $this.scrollTop(),
                    step = (offset - this.lastOffset) / factor;

                $this.siblings().each( function() {
                    var $this = $(this),
                        offset = $this.scrollTop() - step;

                    $this.scrollTop(offset);
                    this.lastOffset = offset;
                });

                this.lastOffset = offset;
            }
        })
        .on('mouseenter', function() {
            $(this).removeClass('disabled').siblings().addClass('disabled');
        });
于 2013-03-11T17:22:09.973 に答える
1

変数を使用してアクティブなテキストボックスを決定し、アクティブ.mousedown()な場合はトリックを実行できます。

var activeScroll = '';

$("#textBox1").on('mousedown focus mouseenter', function () {
    activeScroll = 'scroll1';
}).scroll(function () {
    if (activeScroll == 'scroll1') {
        console.log("scroll 1");
        var offset = $("#textBox1").scrollTop() - scrollPosTBox1;
        var half_offset = offset / 2.0;

        $("#textBox2").scrollTop(scrollPosTBox2 - half_offset);
        $("#textBox3").scrollTop(scrollPosTBox3 - half_offset);
    }
});

更新されたjsFiddle はこちらで確認できます。

于 2013-03-11T16:05:55.333 に答える