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 に答える