Question

我有一个水平滚动条，你可以在这里看到......

除了可以无限期地向右滚动之外，它的效果非常好。

为了限制右滚动（以便在没有更多项目的情况下你不能保持向右滚动），我想检测最后一个按钮（id = lastButton）何时进一步左侧比向右滚动的链接（id = goRightLink）。

我已将这些控制台输出添加到codepen中，因此您可以按照我所看到的内容...

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

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

我无法理解这些数字 - 当我向右滚动足够远的最后一个按钮（按钮30）时，我可以看到值＆＃34; go-right-link： 1389，lastButton：1313＆＃34; （这很棒），但是如果我向左滚动一点使得按钮30现在不在屏幕上，我可以使用值＆＃34; go-right-link：1246，lastButton：1389＆＃34;。然后甚至更奇怪，我再次向左滚动并获得lastButton（-549）的负值。

而不是痛苦地在这里进一步描述，可能更容易使用codepen中的控制台输出来查看数字如何随着Button 30进入和退出而改变。

我试图做的就是在数字中建立某种模式，告诉我何时应该阻止任何进一步的滚动权限（即当按钮30可见时）。

非常感谢任何想法！

------ ------- EDIT

我找到了一个二级解决方案（由于它没有回答与理解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
}

这只能起作用，因为$（＆＃34;＃tagUl＆＃34;）。width（）的结果随着margin-left属性的变化而变化（我不期待的事情！）

Answer 1

尝试包含if条件，以检查.tagUlContainer width加上合并的a元素width加上#tagUL margin-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

另见If element is in viewport- stop scroll animation

了解viewport之外的元素的getBoundingClientRect

------ ------- EDIT

1 个答案: