Question

我发现当我将div overflow-y属性更新为scroll时，更改只会发生一段时间（我几乎看不到滚动变量闪烁）然后，div恢复原来的overflow-y: hidden状态。

这是代码。首先，我创建了一堆div元素，如下所示：

   $('#toAppend').append("<div id = '"+divName+"' class = 'unselected' style = 'overflow-x:hidden; overflow-y:hidden; float:left;'></div>");

稍后，当点击div时，我想展开它并添加滚动条，以便在click()中使用以下内容：

div.css("overflow-y", "scroll");

当我点击一个div时，我非常短暂地看到滚动条然后它就消失了。没有其他css或jQuery触及此overflow-y媒体资源。为什么没有改变呢？

工作示例here。

这是我试图解决的问题：

我已经拥有CSS个类，这些类对应于调整滚动的选定和未选定状态，因此我尝试将overflow-y调整为scroll vs hidden。这也没有显示任何结果。
即使jQuery可以使用overflow-y，我也尝试使用驼峰案例调用css("overflowY"...。这也没有区别。
浏览器中没有任何错误消息，并且发生了点击事件的所有其他相关更新。

这是一个更大的代码示例，涵盖了大部分内容：

$(document).ready(function(){

    // set up sizing variables
    width =  $('#toAppend').width()*.9;
    height = $('#toAppend').height()*.9;       
    widthPer = width/pageArray.length;
    heightPer = height*.2;

    // generate 1 div for each element in pageArray
    for(i = 1; i <= pageArray.length; i++){

        var divName = "div_"+i
        $('#toAppend').append("<div id = '"+divName+"' class = 'unselected' style = 'overflow-x:hidden; overflow-y:hidden; float:left;'></div>");
        $("#"+divName).load(pageArray[i-1]).css("width", Math.round(widthPer*PORTION_DIV)).css("height", heightPer).css("background-color", COLORS[i-1])
            .css('cursor', 'pointer').css("border-radius", BORDER_RADIUS)

        // expand div user clicks on and collapse other sections
            .click(function(event){

                var div = "#div_"+event.currentTarget.id.slice(-1);    
                if($(div).hasClass("unselected") || $(div).hasClass("almostSelected")){
                    var shrinkString = ""
                    var widthPerSmall = Math.round((1-MULTIPLE_TO)*width/(pageArray.length - 1));
                    var divToShrink = "";

                    // generate string of all divs other than selected one to shrink them down simultaneously
                    for(ii = 1; ii <= pageArray.length; ii++){
                        if(ii !== Number(event.currentTarget.id.slice(-1))){
                            var divShrink = "#div_"+ii;
                            shrinkString = shrinkString + divShrink +", " ;
                            if($(divShrink).hasClass("selected")){
                                divToShrink = divShrink;
                                $(divToShrink).switchClass("selected", "unselected", SHORT_TIME)

                            }
                        }
                    }

                    // shrink elements in a given order with nested callbacks
                    shrinkString = shrinkString.slice(0, -2);
                    $(shrinkString)
                        .animate({ width: widthPerSmall, height: heightPer}, LONG_TIME, function(){
                            $(div).animate({width: Math.round(MULTIPLE_TO*width), height: height}, LONG_TIME, function(){
                                if(divToShrink.length > 1){
                                    toShrink = divToShrink.slice(-1)
                                    $(divToShrink).load(pageArray[toShrink-1])
                                        .css("background-color", COLORS[toShrink-1])
                                }
                            })
                                .switchClass(["unselected", "almostSelected"], "selected", LONG_TIME)
                                .load(longPageArray[Number(event.currentTarget.id.slice(-1))-1 ]).attr("class", "selected")
                                .css("background-color", "white").css("border", BORDER+COLORS[Number(event.currentTarget.id.slice(-1))-1])
                                .css("overflow-y", "scroll");

                        })
                    // this should be called only for first click, when no elements are yet selected
                    if(divToShrink.length < 1) $(div).animate({width: Math.round(MULTIPLE_TO*width), height: height}, LONG_TIME).switchClass(["unselected", "almostSelected"], "selected", LONG_TIME).load(longPageArray[Number(event.curren\
tTarget.id.slice(-1))-1 ]).attr("class", "selected").css("background-color", "white").css("border", BORDER+COLORS[Number(event.currentTarget.id.slice(-1))-1]).css("overflow-y", "scroll");

                }


            })
    }

Answer 1

你需要在你的动画函数的回调中应用你的css来扩展div，而不是像你当前那样调用animate()之后链接它。链接jQuery动画方法将这些函数添加到fx队列，但是css()之类的非动画方法不会添加到该队列中。相反，他们立即被解雇。看一下jQuery source你可以看到，当动画元素时，jQuery将溢出更改为隐藏，然后将其更改回原来的溢出属性完成动画时的状态。在这种情况下，由于异步链，jQuery采用其原始内联样式而不是链式css()方法中的一个。根据经验，如果你要调用任何不是动画的jQuery方法，不要将它链接起来，但要把它放在回调中。

jQuery overflow-y更新滚动简要显示但后来恢复为无滚动

1 个答案: