Javascript jquery函数不适用于重复除法

我有一个使用自定义元素反转滚动条功能的功能。现在，当我复制div时，我无法让它工作。有人能帮我在多个部门工作吗

小提琴在这里：

任何形式的帮助都会很好

HTML:

<div id="textarea">
    <div id="test">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget nisi ipsum. Donec semper, justo at fringilla condimentum, felis tellus ultricies dolor, id convallis metus nulla quis est. Vivamus facilisis orci vel lectus blandit commodo blandit sem tempor. Curabitur condimentum, diam quis pretium feugiat, sem ante pretium tortor, in lobortis massa eros vitae dui. Nullam nisi mauris, condimentum a feugiat in, euismod quis augue. Maecenas euismod adipiscing tellus. Aliquam elementum egestas dolor, vel aliquam nulla tincidunt eget. Etiam risus elit, scelerisque eu volutpat sed, faucibus non ante. Donec sed nunc erat, eget facilisis risus. Etiam id odio tortor. Sed aliquam viverra volutpat. Sed gravida lectus eu mi ornare in feugiat magna elementum. Pellentesque in dolor ligula.

Maecenas condimentum nisl eget arcu elementum nec imperdiet risus lobortis. Suspendisse id placerat turpis. Etiam dolor quam, placerat et volutpat nec, ultricies sed lorem. Fusce volutpat lobortis est ut pellentesque. Donec enim mauris, pretium quis gravida vitae, pellentesque ac nibh. Proin condimentum aliquam scelerisque. Vestibulum aliquet pharetra dapibus. Donec id nisi non nibh fringilla auctor et eget erat. Morbi pretium mauris sed orci pretium aliquam. Nulla pharetra venenatis nunc, in venenatis purus tempor vitae. Vivamus tincidunt dui non eros gravida sit amet consectetur nibh lacinia. 

Maecenas semper ligula et urna tincidunt placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse arcu urna, facilisis at tempus id, posuere sed lacus. Vestibulum in feugiat tellus. Nullam suscipit, velit nec tincidunt pellentesque, enim odio ornare mauris, quis faucibus sem sapien sed turpis. Nulla sit amet risus in magna iaculis scelerisque sit amet vel erat. Morbi eu vestibulum nulla. Etiam auctor auctor felis, nec sodales velit condimentum non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis eu massa diam, eu porttitor eros. Etiam blandit, turpis ac volutpat gravida, massa lorem congue orci, eget fringilla eros felis quis elit. Suspendisse quam tellus, pretium non mattis ut, laoreet in diam. Suspendisse ante odio, venenatis vel condimentum vitae, varius id sapien. Quisque ac nunc ipsum. Mauris porttitor blandit magna, id rutrum ipsum pellentesque non. In suscipit diam ligula, non tristique diam.

Aliquam interdum ante at nisl sagittis vel luctus eros fringilla. Vestibulum purus orci, ultrices at tristique et, malesuada eget enim. Praesent commodo erat vel massa auctor id elementum elit elementum. Duis diam urna, mollis ut imperdiet aliquam, commodo id dui. Etiam vulputate facilisis dui id convall

Aliquam interdum ante at nisl sagittis vel luctus eros fringilla. Vestibulum purus orci, ultrices at tristique et, malesuada eget enim. Praesent commodo erat vel massa auctor id elementum elit elementum. Duis diam urna, mollis ut imperdiet aliquam, commodo id dui. Etiam vulputate facilisis dui id convall Daniel 
        asdasdas dasd asd asldnalsdsvlkarau idhlkjansdfnl inaldnflkanlsdfh ]sdf oasdfj ihjaiodfhkajdsnoviaehu234 kn 87r 23n sf8yr 1238u ndkfn9 48yj wodifn2937rh e0o94tjo nug-2jnfio 203nf273rhefn 2893hr0 284f jnf j0nm ;onf9o8h sdjfi9 w8rho jubnr9ygv7gh wionuf2983h iurbgfi9 48hr jfna sdf asdf alsdfn a;sdf kasdfkjasdfnasdfjakjdf asdfioundvklasdvkia
    </div>
</div>
<div id="track">
    <div id="rocket">    
    </div>
</div>
<div id="xpos" style="clear:both">
</div>
<hr>

<div id="textarea">
    <div id="test">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget nisi ipsum. Donec semper, justo at fringilla condimentum, felis tellus ultricies dolor, id convallis metus nulla quis est. Vivamus facilisis orci vel lectus blandit commodo blandit sem tempor. Curabitur condimentum, diam quis pretium feugiat, sem ante pretium tortor, in lobortis massa eros vitae dui. Nullam nisi mauris, condimentum a feugiat in, euismod quis augue. Maecenas euismod adipiscing tellus. Aliquam elementum egestas dolor, vel aliquam nulla tincidunt eget. Etiam risus elit, scelerisque eu volutpat sed, faucibus non ante. Donec sed nunc erat, eget facilisis risus. Etiam id odio tortor. Sed aliquam viverra volutpat. Sed gravida lectus eu mi ornare in feugiat magna elementum. Pellentesque in dolor ligula.

Maecenas condimentum nisl eget arcu elementum nec imperdiet risus lobortis. Suspendisse id placerat turpis. Etiam dolor quam, placerat et volutpat nec, ultricies sed lorem. Fusce volutpat lobortis est ut pellentesque. Donec enim mauris, pretium quis gravida vitae, pellentesque ac nibh. Proin condimentum aliquam scelerisque. Vestibulum aliquet pharetra dapibus. Donec id nisi non nibh fringilla auctor et eget erat. Morbi pretium mauris sed orci pretium aliquam. Nulla pharetra venenatis nunc, in venenatis purus tempor vitae. Vivamus tincidunt dui non eros gravida sit amet consectetur nibh lacinia. 

Maecenas semper ligula et urna tincidunt placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse arcu urna, facilisis at tempus id, posuere sed lacus. Vestibulum in feugiat tellus. Nullam suscipit, velit nec tincidunt pellentesque, enim odio ornare mauris, quis faucibus sem sapien sed turpis. Nulla sit amet risus in magna iaculis scelerisque sit amet vel erat. Morbi eu vestibulum nulla. Etiam auctor auctor felis, nec sodales velit condimentum non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis eu massa diam, eu porttitor eros. Etiam blandit, turpis ac volutpat gravida, massa lorem congue orci, eget fringilla eros felis quis elit. Suspendisse quam tellus, pretium non mattis ut, laoreet in diam. Suspendisse ante odio, venenatis vel condimentum vitae, varius id sapien. Quisque ac nunc ipsum. Mauris porttitor blandit magna, id rutrum ipsum pellentesque non. In suscipit diam ligula, non tristique diam.

Aliquam interdum ante at nisl sagittis vel luctus eros fringilla. Vestibulum purus orci, ultrices at tristique et, malesuada eget enim. Praesent commodo erat vel massa auctor id elementum elit elementum. Duis diam urna, mollis ut imperdiet aliquam, commodo id dui. Etiam vulputate facilisis dui id convall

Aliquam interdum ante at nisl sagittis vel luctus eros fringilla. Vestibulum purus orci, ultrices at tristique et, malesuada eget enim. Praesent commodo erat vel massa auctor id elementum elit elementum. Duis diam urna, mollis ut imperdiet aliquam, commodo id dui. Etiam vulputate facilisis dui id convall Daniel 
        asdasdas dasd asd asldnalsdsvlkarau idhlkjansdfnl inaldnflkanlsdfh ]sdf oasdfj ihjaiodfhkajdsnoviaehu234 kn 87r 23n sf8yr 1238u ndkfn9 48yj wodifn2937rh e0o94tjo nug-2jnfio 203nf273rhefn 2893hr0 284f jnf j0nm ;onf9o8h sdjfi9 w8rho jubnr9ygv7gh wionuf2983h iurbgfi9 48hr jfna sdf asdf alsdfn a;sdf kasdfkjasdfnasdfjakjdf asdfioundvklasdvkia
    </div>
</div>
<div id="track">
    <div id="rocket">    
    </div>
</div>
<div id="xpos" style="clear:both">
</div>

​

Jquery+Jquery用户界面：

$(document).ready(function() {
    var lastScrollTop = 0;
    var iHeight = $("#test").height() - 48;
    var iScrollHeight = $("#test").prop("scrollHeight");
    var left = parseInt($('#track').css('margin-left'), 10);
    var top = parseInt($('#track').css('margin-top'), 10);


    var textareaWidth = document.getElementById("test").scrollWidth;

    // width of our wrapper equals width of the inner part of the textarea
    document.getElementById("textarea").style.width = textareaWidth + 'px';

    //common ratio
    var cr = (iScrollHeight / iHeight) - 1.135;
    $("#rocket").css("top", iHeight);

    var draggingRocket = false;
    $("#test").scroll(function(event) {
        if (!draggingRocket) {
            var st = $(this).scrollTop();
            var pos = iHeight - (st / cr);
            $("#rocket").css("top", pos);
        }
    });


    //rocket drag
    $("#rocket").draggable({
        containment: $('#track'),
        axis: "y",
        scroll: false,
        start: function(event, ui) {
            draggingRocket = true;
        },
        drag: function(event, ui) {
            // Show the current dragged position of image
            var currentPos = $(this).position();
            var top = parseInt($('#rocket').css('top'), 10);
            var mst = (iHeight - top) * cr;
            $("#test").scrollTop(mst);

        },
        stop: function(event, ui) {
            draggingRocket = false;
        }
    });

});​

---

属性id仅对整个页面上的一个元素有效。您定义了两个元素“rocket”，因此代码无法运行…

第一个错误是，每个文档只能出现一次ID。您需要使用类属性作为选择器来实现该特性

然后我将通过JS创建

#track

/

#rocket

，而不是在HTML中硬编码。如果这样做正确，只需将特定类分配给任何HTML元素，并启用滚动效果，并通过JS事件处理程序插入其所有元素

例如：

<div class="my-scroller">
    Content Box 1
</div>

<div class="my-scroller">
    Content Box 2
</div>

内容框1
内容框2

JS:

jQuery（文档）.ready（函数（$）{
$（'.my scroller'）。每个（函数（）{
/*创建滚动手柄元素（火箭）*/
变量scrollHandle=$（''）；
/*将拖动事件指定给当前滚动句柄*/
scrollHandle.draggable（/*…*/）；
/*将滚动句柄附加到当前的.my滚动条*/
$（this.append）（滚动句柄）；
/*将滚动事件分配给当前的.my滚动程序*/
$（此）。滚动（/*…*/）；
} );
} );

hey Malifice我有什么见解可以让它工作吗？比如我应该把它括在一个父div中，然后指向它吗？@danieleuchar请参阅答案更新（示例）。滚动手柄（火箭）是为每个滚动

DIV

元素创建并绑定的。

<div class="my-scroller">
    Content Box 1
</div>

<div class="my-scroller">
    Content Box 2
</div>

jQuery( document ).ready( function( $ ) {
    $( '.my-scroller' ).each( function() {

        /* create the scroll handle element (the rocket) */
        var scrollHandle = $( '<div class="scroll-handle rocket" />' );

        /* assign the drag event to the current scroll handle */
        scrollHandle.draggable( /* … */ );

        /* append the scroll handle to the current .my-scroller */
        $( this ).append( scrollHandle );

        /* assign the scroll event to the current .my-scroller */
        $( this ).scroll( /* … */ );

    } );
} );