Question

需要帮助新手。我在可滚动div（微小滚动条）内有一个列表元素，具有不同的背景颜色：红色和蓝色。我还有一个红色和蓝色背景颜色的两个方形div。

ToDo：当列表滚动到第一个蓝色元素时，将类'border'添加到蓝色方格div。

我猜应该有类似于不同颜色列表元素的位置触发器。需要帮助！

Answer 1

您可以自定义插件以支持滚动事件。修改whell和drag函数，如下所示：

function wheel(oEvent) {
    if (!(oContent.ratio >= 1)) {
        oEvent = $.event.fix(oEvent || window.event);
        var iDelta = oEvent.wheelDelta ? oEvent.wheelDelta / 120 : -oEvent.detail / 3;
        iScroll -= iDelta * options.wheel;
        iScroll = Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll));
        oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
        oContent.obj.css(sDirection, -iScroll);
        oEvent.preventDefault();

        // New code
        if (options.onScroll && typeof (options.onScroll) == "function") {
            options.onScroll.call(this);
        }
    };
};

function drag(oEvent) {
    if (!(oContent.ratio >= 1)) {
        iPosition.now = Math.min((oTrack[options.axis] - oThumb[options.axis]), Math.max(0, (iPosition.start + ((sAxis ? oEvent.pageX : oEvent.pageY) - iMouse.start))));
        iScroll = iPosition.now * oScrollbar.ratio;
        oContent.obj.css(sDirection, -iScroll);
        oThumb.obj.css(sDirection, iPosition.now);

        // New code
        if (options.onScroll && typeof (options.onScroll) == "function") {
            options.onScroll.call(this);
        }
    }
    return false;
};

然后你可以传递一个将在滚动时执行的自定义函数：

$(function () {
     var fisrtBlueOffset = $(".overview li.blue:first").offset().top;
     var viewportHeight = $(".viewport").height();
     $('#scrollbar1').tinyscrollbar({
          "onScroll": function () {
               var viewportTop = parseInt($(".overview").css("top"));
               if (fisrtBlueOffset + viewportTop < viewportHeight) {
                    $(".blue-block").css("border", "1px solid #000");
               }
               else {
                    $(".blue-block").css("border", "");
               }
          }
     });
});

根据可滚动内容的样式更改元素样式

1 个答案: