Question

我正在尝试使用左变量替换此代码中的'1493'。当它是一个数字时它工作正常，但当我改为使用'left'时，if语句停止工作。

$(document).scroll(function () { 
        var width = $(document).width();
        var left = $(document).scrollLeft();    

        var postCount = $(".post").length;  

        var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));

        if(left >= columnLength) {
            $(".num").text(left);
        } 


     });

有没有人有任何想法我哪里出错了？任何指针都会很棒。

Answer 1

您可能需要强制它为整数：

var left = parseInt($(document).scrollLeft());

Answer 2

让我们看看你真的很快的数学。

var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));

你基本上取消了宽度，并且（postCount * 743）。它给你留下了-1493，这是正1493.以下会产生同样的效果：

var columnLength = 1493;

所以，当你输入静态值1493时if语句触发的原因是因为columnLength总是等于1493，当然满足这个条件：

if (1493 >= columnLength)

你可以轻松地写下来：

if (1493 >= 1493)

那就是说，理论上它应该在左边变得大于或等于1493时触发。但是左边是当前水平滚动位置（以像素为单位）。这将是一个非常宽的页面，可以达到1493的滚动位置。

编辑：这是一个小提琴，可以了解滚动位置增加的速度：http://jsfiddle.net/vdQ7B/16/

编辑2：

以下是针对您的评论的更新。

据我所知，你试图获得一个基本上可以永久滚动的水平滚动条。

请参阅以下小提琴演示：http://jsfiddle.net/vdQ7B/40/

代码如下：

$(document).scroll(function () { 
    var width = $(document).width();
    var left = $(document).scrollLeft();
    var viewportwidth = window.innerWidth;

    // If our scrollbar gets to the end, 
    // add 50 more pixels. This could be set
    // to anything.
    if((left + viewportwidth) === width) {
        $("body").css("width", width + 50);
    } 
 });

根据代码中的注释，如果我们确定已经到达终点，我们只需增加主体的宽度。 scrollLeft（）只会告诉我们可视区域左侧当前不可见的像素数。所以，我们需要知道我们有多少可视区域，以及隐藏多少左侧知道我们是否一直滚动到最后。

如果内部元素上有一个滚动条，就像div一样，则需要更新div的宽度，而不是正文。

注意：您可能还需要使用$（window）而不是$（document）来使scrollLeft（）在所有浏览器中都能正常工作。

注意：请参阅此处有关使用“innerWidth”的信息。存在一些兼容性问题，您可能需要对其进行扩展以处理其他情况（IE6）。

将$（document）.scrollLeft（）作为变量发出问题

2 个答案: