滚动按钮jQuery不立即工作 [英] Scrolling button jQuery doesn't work instantly

问题描述

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

I'm working on some web pages that use a button to scroll to the next div. I can get it to work on every page, except in this particular instance (see jsfiddle).

我的问题是按钮不工作加载页面，用户首先必须在按钮工作之前手动开始滚动。我假设这是因为在我的jQuery编码的一些错误，我已经看了一遍，但我似乎找不到问题。有没有人比我更熟悉jQuery谁可以提供我一个解决方案？

My problem is that the buttons don't work on loading the page, the user first has to start scrolling manually, before the buttons work. I'm assuming that's because of some fault in my jQuery coding, which I've looked over and over, but I can't seem to find the problem. Is there anyone who is a bit more familiar with jQuery than I am who can offer me a solution?

http://jsfiddle.net/y5wx7nst/3/

 $(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);

});

推荐答案

你只调用onScroll最初滚动：

You are only calling the onScroll() function after you initially scroll:

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

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

I added this before that declaration and it all worked:

onScroll();

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

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

这篇关于滚动按钮jQuery不立即工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！