1

在升级到 JQuery 1.7.1 之前，垂直和水平滑块都可以正常工作。现在我已经升级到 1.7.1，一切都停止了。以下是我的代码。

$("#HorizontalScrollBar").slider({
    change: HorizontalHandleChange,
    slide: HorizontalHandleSlide,
    min: 0,
    max: 100
});

$("#VerticalScrollBar").slider({    
    orientation: "vertical",
    change: VerticalHandleChange,
    slide: VerticalHandleSlide,
    min: -100,
    max: 0
});

水平滑块手柄的代码

function HorizontalHandleChange(e, ui) {
    var maxScroll = $(".HorizontalScroll").attr("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").animate({ 
        scrollLeft: +ui.value * (maxScroll / 100)
    }, 100);    
}

function HorizontalHandleSlide(e, ui) {
    var maxScroll = $(".HorizontalScroll").attr("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").attr({ 
        scrollLeft: +ui.value * (maxScroll / 100)   
    });
}

和垂直滑块手柄

function VerticalHandleChange(e, ui) {
    var maxScroll = $(".VerticalScroll").attr("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").animate({ 
        scrollTop: -ui.value * (maxScroll / 100)
    }, 100);
}

function VerticalHandleSlide(e, ui) {
    var maxScroll = $(".VerticalScroll").attr("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").attr({ 
        scrollTop: -ui.value * (maxScroll / 100)   
    });
}

无论如何，我希望有人能为我找到一个解决方案，让我的滑块与 JQuery 1.7.1 一起工作。谢谢。

仅供参考，滑块用于 4 个 DIV，即。Top、MidLeft、MidRight 和 Bottom，其中垂直滑块适用于 MidLeft 和 MidRight，而水平滑块适用于 MidRight、Top 和 Bottom，尽管我不认为这可能是问题的原因。

4

1 回答 1

2

scrollWidth和scrollHeight是属性，使用.prop方法来获取和设置它们。

function HorizontalHandleChange(e, ui) {
    var maxScroll = $(".HorizontalScroll").prop("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").animate({
        scrollLeft: +ui.value * (maxScroll / 100)
    }, 100);
}

function HorizontalHandleSlide(e, ui) {
    var maxScroll = $(".HorizontalScroll").prop("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").attr({
        scrollLeft: +ui.value * (maxScroll / 100)
    });
}

function VerticalHandleChange(e, ui) {
    var maxScroll = $(".VerticalScroll").prop("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").animate({
        scrollTop: -ui.value * (maxScroll / 100)
    }, 100);
}

function VerticalHandleSlide(e, ui) {
    var maxScroll = $(".VerticalScroll").prop("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").attr({
        scrollTop: -ui.value * (maxScroll / 100)
    });
}

这个变化来自 jQuery 1.6，它.attr被分成了两个方法，.attr作用.prop于.attr属性和.prop作用于属性。

于 2012-01-11T18:27:16.300 回答