0

ここでわかるように、水平スクロールバーがあります...

http://codepen.io/anon/pen/rxxEQb

無限に右にスクロールできるという事実を除けば、かなりうまく機能します。

右スクロールを制限するために (アイテムがなくなったときに右にスクロールし続けることができないようにするため)、最後のボタン (id=lastButton) が右にスクロールするリンクよりも左にあることを検出したいと考えています ( id=goRightLink)。

これらのコンソール出力をコードペンに追加したので、私が見ているものに従うことができます...

console.log("right of go-right-link: " + $("#goRightLink")[0].getBoundingClientRect().right);

console.log("right of lastButton: " + $("#lastButton")[0].getBoundingClientRect().right);

数字の意味がわかりません。最後のボタン (ボタン 30) が表示されるまで右にスクロールすると、「go-right-link: 1389, lastButton: 1313」という値が表示されます (これは素晴らしいです)、しかし、ボタン 30 が画面外になるように少し左にスクロールすると、「go-right-link: 1246, lastButton: 1389」という値を使用できます。さらに奇妙なことに、もう一度少し左にスクロールすると、lastButton の負の値 (-549) が得られます。

ここでそれを痛烈に説明するよりも、codepen のコンソール出力を使用して、ボタン 30 が表示されたり表示されなくなったりするときに数値がどのように変化するかを確認する方がおそらく簡単です。

私がやろうとしているのは、それ以上のスクロール権をいつ防止する必要があるか (つまり、ボタン 30 が表示されているとき) を教えてくれる数字のパターンを確立することだけです。

どんな考えでも大歓迎です！

- - - 編集 - - - -

これに対する二次的な解決策を見つけました（getBoundingClientRect（）の理解に関する質問には答えていないため、回答として投稿していません）。結局、ul内のすべてのボタンを単純に合計しました（これにより、画面のオン/オフに関係なく幅が得られます）...

var widthOfAllTagLis=0;
          $("#tagUl li button").each(
                                    function() {
                                      widthOfAllTagLis = widthOfAllTagLis + $(this).outerWidth(true); //passing true includes margins (as well as padding)
                                    });

そして、右への遷移の前にこのチェックを追加します...

if ($("#tagUl").width() + 5 < widthOfAllTagLis) { //perform transition 
} else {
//don't perform transition because we can already see all the buttons
}

これは、 $("#tagUl").width() の結果が margin-left プロパティの変更に応じて変更されるためにのみ機能します (私が予期していなかったものです!)

4

1 に答える 1

0

plus 結合された要素plusが、増加する負の値よりも大きいifかどうかを確認する条件を含めてみてください。.tagUlContainer widthawidth#tagUL margin-left0

var tags = $("#tagUl"),
  w = parseInt(tags.find("li").css("width")) * tags.find("li").length;

function scrollTags(direction) {
  console.log(w + (parseInt(tags.css("marginLeft"))) + 200
             , tags.parent().width());
    if (direction == "right") {
      if (w + (parseInt(tags.css("marginLeft"))) + 200 >
          tags.parent().width()) {
        tags.animate({
          marginLeft: "-=200"
        }, "fast");
      }

    } else {
      if (parseInt(tags.css('marginLeft')) < 0) {
        tags.animate({
          marginLeft: "+=200"
        }, "fast");
      }
    }
}

codepen http://codepen.io/anon/pen/NxRJqK

If element is in viewport- stop scroll animationも参照してください

于 2015-12-27T16:57:06.383 に答える