滚动按钮 jQuery 不能立即工作答案

【问题标题】：Scrolling button jQuery doesn't work instantly滚动按钮 jQuery 不能立即工作
【发布时间】：2015-05-21 15:42:28
【问题描述】：

我正在处理一些使用按钮滚动到下一个 div 的网页。我可以让它在每个页面上工作，除了这个特定的实例（见 jsfiddle）。

我的问题是按钮在加载页面时不起作用，用户首先必须手动开始滚动，然后按钮才能起作用。我假设这是因为我的 jQuery 编码中的一些错误，我一遍又一遍地查看，但我似乎找不到问题所在。有没有比我更熟悉 jQuery 的人可以给我一个解决方案？

 $(document).ready(function () {

var currentElement = $("#bodytext > div:nth-child(1)");

var onScroll = function () {
    var container = $("#bodytext");
    var children = $(".section");
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        var childLeft = container.offset().left < child.offset().left;
        if (childLeft) {
            currentElement = child;
            console.log(currentElement);
            return;
        }
    }
};

var scrollToElement = function ($element) {
    var container = $("#bodytext");
    var children = $(".section");
    var width = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        if (child.get(0) == $element.get(0)) {
            if (i === 0) {
                width = 0;
            }
            container.animate({
                scrollLeft: width
            }, 500);
            onScroll();
        }
        if (child.next().length > 0) {
            width += child.next().offset().left - child.offset().left;
        } else {
            width += child.width();
        }
    }
};

var buttonright = function (e) {
        scrollToElement(currentElement.next());
    };

var buttonleft = function (e) {
    var container = $("#bodytext");
    if (currentElement.prev().length > 0) {
        if (container.offset().left == currentElement.prev().offset().left) {
            currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
        } else {
            currentElement = currentElement.prev();
        }
    }
    scrollToElement(currentElement);
};

$("#bodytext").scroll(onScroll);
$("#buttonright").click(buttonright);
$("#buttonleft").click(buttonleft);

});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您只是在最初滚动后才调用 onScroll() 函数：

$("#bodytext").scroll(onScroll);

我在声明之前添加了这个并且一切正常：

onScroll();

jsfiddle：http://jsfiddle.net/y5wx7nst/5/

【讨论】：

非常感谢你，救了我的命。我知道有一个非常简单的解决方案。

【解决方案2】：

当 currentElement 的代码运行值不正确时。所以你应该计算它调用一个函数 onScroll();

...
$("#bodytext").scroll(onScroll);
$("#buttonright").click(buttonright);
$("#buttonleft").click(buttonleft);
onScroll();
});

【讨论】：