0

我目前正在使用以下代码来向上/向下滚动文本...我想对代码进行以下修改，但正在努力实现它：

  • 检查文本的位置并影响向上/向下箭头的不透明度。当#scroll 的内容位于顶部时，向上 (#scroll-up) 箭头将淡出。当#scroll 的内容在底部时，向下(#scroll-down) 箭头淡出。在两者之间的任何地方，两个按钮都会淡入。
  • 如果不需要，隐藏滚动按钮

这是当前代码：

var ele   = $('#scroll');
var speed = 25, scroll = 5, scrolling;
$('#scroll-up').mouseenter(function() {
    scrolling = window.setInterval(function() {
        ele.scrollTop( ele.scrollTop() - scroll );
    }, speed);
});
$('#scroll-down').mouseenter(function() {
    scrolling = window.setInterval(function() {
        ele.scrollTop( ele.scrollTop() + scroll );
    }, speed);
});
$('#scroll-up, #scroll-down').bind({
    click: function(e) {
        e.preventDefault();
    },
    mouseleave: function() {
        if (scrolling) {
            window.clearInterval(scrolling);
            scrolling = false;
        }
    }
});
4

1 回答 1

0

看起来这可能会奏效。

$(function() {
    var ele   = $('#scroll');
    var speed = 25, scroll = 5, scrolling;
    $("#scroll-up").css('opacity', 0.5);

    $('#scroll-up').mouseenter(function() {
        // Scroll the element up
        scrolling = window.setInterval(function() {
            ele.scrollTop( ele.scrollTop() - scroll );
            $("#scroll-up").css("opacity", (ele.scrollTop() == 0) ? 0.5 : 1);
            $("#scroll-down").css("opacity", (ele[0].scrollHeight - ele.scrollTop() == ele.outerHeight()) ? 0.5 : 1);
        }, speed);
    });

    $('#scroll-down').mouseenter(function() {
        // Scroll the element down
        scrolling = window.setInterval(function() {
            ele.scrollTop( ele.scrollTop() + scroll );
            $("#scroll-up").css("opacity", (ele.scrollTop() == 0) ? 0.5 : 1);
            $("#scroll-down").css("opacity", (ele[0].scrollHeight - ele.scrollTop() == ele.outerHeight()) ? 0.5 : 1);
        }, speed);
    });

    $('#scroll-up, #scroll-down').bind({
        click: function(e) {
            // Prevent the default click action
            e.preventDefault();
        },
        mouseleave: function() {
            if (scrolling) {
                window.clearInterval(scrolling);
                scrolling = false;
            }
        }
    });
    var winHeight = $(window).height();
    $("#scroll").css("height", winHeight - 220);

    if (ele[0].scrollHeight == ele.outerHeight()){
        $("#contentscrollnav").hide();
    }
});

$(window).resize(function() {
    var winHeight = $(window).height();
    $("#scroll").css("height", winHeight - 220);

    var ele = $('#scroll');
    if (ele[0].scrollHeight <= ele.outerHeight()){
        $("#contentscrollnav").hide();
    } else if (ele[0].scrollHeight > ele.outerHeight()) {
        $("#contentscrollnav").show();
    }
});

您可以在以下位置查看代码：http: //jsfiddle.net/MzDst/11/

于 2013-07-15T01:05:45.377 回答