jQuery溢出-y更新，简要显示滚动，然后恢复为无滚动。
我发现，当我将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属性。为什么改变不存在？
工作示例这里。
以下是我尝试过的麻烦：
- 我已经有了与选择的和未选择的状态相对应的
CSS类来调节滚动，所以我尝试将overflow-y调整为scrollvshidden。这也没有显示任何结果。 - 即使jQuery可以使用
overflow-y，我也尝试使用camel case调用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");
}
})
}回答 1
Stack Overflow用户
发布于 2015-10-30 20:40:38
您需要在动画函数回调中应用css来展开div，而不是像当前一样在调用animate()之后将其链接起来。链接jQuery动画方法将这些函数添加到fx队列中，但是css()等非动画方法不会被添加到该队列中。相反，他们会立即被解雇。查看一下jQuery源，您可以看到，当动画元素运行时，jQuery会将溢出更改为隐藏，然后将其更改回它认为使用动画时的原始溢出属性。在本例中，由于异步链的存在，jQuery采用了它原来的内联样式，而不是链式css()方法中的一种。经验法则是，如果您正在调用任何不是动画的jQuery方法，请不要链接它，而是将它放在回调中。
需要将相关代码块更改为：
$(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])
}
//APPLY THIS IN CALLBACK
$(this).css("overflow-y", "scroll");
})虽然jQuery会将动画的溢出更改为隐藏的，但正如您最初发现的那样，通过链接该方法，您实际上可以在动画期间覆盖该溢出。因此，如果这对您很重要，您可以继续链接该方法并将其添加到回调中。在您的特定实例中，与其他动画方法发生冲突，会导致溢出恢复到隐藏的持续时间，因此溢出会闪烁。因此，这取决于您是同时包含这两个调用，还是只在动画方法的回调中保留一个调用。
另外，我还注意到，您总是将jquery css()函数链接在相同的元素上。您知道，您可以将所有属性保存为对象，并将其作为参数传递给您，以保存所有这些函数调用？
https://stackoverflow.com/questions/33396025
复制相似问题
腾讯云开发者
