Понимание getBoundingClientRect для элементов вне области просмотра

Question

У меня есть горизонтальная полоса прокрутки, как вы можете видеть здесь...

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).

Вместо того, чтобы мучительно описывать это далее, вероятно, проще использовать вывод консоли в коде ручки, чтобы увидеть, как меняются числа при входе и выходе из кнопки 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 (чего я не ожидал!)

Answer 1

Попробуйте в том числе if условие, чтобы проверить, если .tagUlContainerwidth плюс в сочетании a элементы width плюс #tagULmargin-left, который будет увеличиваться отрицательное значение, больше, чем 0

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

Смотрите также, если элемент находится в области просмотра - остановить анимацию прокрутки