0

li水平スクロールの動きに基づいて、「選択した」クラスを変更できるかどうかを知りたいです。したがって、スクロールを右に移動し始めると、選択したliクラスが2、3、4..などに変わります。

出発点となるヒントやポイントをいただければ幸いです。

私のコード：

<div id="scroller">
<ul id="ulscroller">
<li value="1" class="selected">1</li>
<li value="2">2</li>
<li value="3">3</li>
<li value="4">4</li>
<li value="5">5</li>
<li value="6">6</li>
<li value="7">7</li>
<li value="8">8</li>
<li value="9">9</li>
<li value="10">10</li>
<li value="11">11</li>
<li value="12">12</li>
<li value="13">13</li>
<li value="14">14</li>
<li value="15">15</li>
<li value="16">16</li>
<li value="17">17</li>
<li value="18">18</li>
<li value="19">19</li>
<li value="20">20</li>

</ul>

</div>

CSS：

li {float:left; padding:10px; cursor: pointer;}
    div#scroller {width:300px; height:70px; overflow-x: scroll;}
    ul#ulscroller {list-style: none outside none; margin: 0;
        padding: 0; width:655px;}
    ul#ulscroller li.selected {border:1px solid #000;}

フィドル： http： //jsfiddle.net/7uCS8/

4

4 に答える 4

1

基本的な考え方:

var scroller = document.getElementById("scroller"),
    lis = scroller.getElementsByTagName("li"),
    divisionsWidth = lis[0].offsetWidth - 2,
    current = 0,
scroller.onscroll = function(){
    var selected = Math.floor(scroller.scrollLeft/divisionsWidth);
    if (current!==selected) {
        lis[current].className="";
        lis[selected].className="selected";
        current = selected;
    }
};

微調整して選択を変更できますが、出発点としては適切です。

于 2013-01-25T17:06:03.853 に答える
0

おそらく、liには定義された幅があるので、各スクロールイベントで現在のスクロールをピクセル単位で取得でき（jQueryで簡単に実行できます）、スクロール位置がクラス名を変更する任意の位置にある場合は、それを変更します。JavaScriptとクラスを削除するグループのクラスで簡単に識別できるように、各li要素にid値を使用したいと思います。このようなもの：

$(document).scroll(function() {
    var scrollPosition = $(document).scrollLeft();
    if (scrollPosition >= 0 && scrollPosition < 300) {
        $("li.scroller_children").removeClass("selected");
        $("li#1").addClass("selected");
    } elseif (scrollPosition >= 300 && scrollPosition < 900) {
        $("li.scroller_children").removeClass("selected");
        $("li#2").addClass("selected");
    } elseif ....
});

私

于 2013-01-25T17:03:46.190 に答える
0

jQuery を使用すると、このようなことができます。

$(window).scroll(function (scrolledTo) {
    $("li:[value=" + scrolledTo).addClass("selected");
    $("li.selected").removeClass("selected");
});

残念ながら、イベントからウィンドウがスクロールされた場所 ( ) を取得する方法がわかりscrolledToません。jQuery のドキュメントにはないようです。しかし、あなたは出発点が欲しいとおっしゃっていたので、これで少なくとも出発点が得られると思いました。

于 2013-01-25T17:05:14.490 に答える
0

これを試すことができますが、いくつかの変更が必要です...

$("#scroller").scroll(function () { 
     $(".selected").removeClass("selected").next().addClass("selected");
});
于 2013-01-25T17:26:26.053 に答える