title: jQuery overflow-y update to scroll briefly shows but then reverts to no-scroll
body: <p>I find that when I update a <code>div</code>'s <code>overflow-y</code> property to <code>scroll</code> the change happens only for a moment (I can just barely see the scroll var flicker in and out), and then the <code>div</code> reverts to its original <code>overflow-y: hidden</code> status.</p>
  
  <p>Here's the code. First, I create a bunch of <code>div</code> elements like so:</p>
  
  <pre><code>   $('#toAppend').append("&lt;div id = '"+divName+"' class = 'unselected' style = 'overflow-x:hidden; overflow-y:hidden; float:left;'&gt;&lt;/div&gt;");
  </code></pre>
  
  <p>Later on, when a div is clicked, I want to expand it and add a scroll bar so I use the following in <code>click()</code>:</p>
  
  <pre><code>div.css("overflow-y", "scroll");
  </code></pre>
  
  <p>When I then click on a div, I very fleetingly see the scroll bar and then it disappears. There is no other <code>css</code> or <code>jQuery</code> touching this <code>overflow-y</code> property. Why doesn't the change remain?</p>
  
  <p>Working example <a href="http://sunnysideworks.nyc/test/test" rel="nofollow">here</a>.</p>
  
  <p>Here's what I've tried to trouble-shoot:</p>
  
  <ul>
  <li>I already have <code>CSS</code> classes that correspond to the selected and unselected states that regulate scrolling, so I tried adjusting <code>overflow-y</code> to <code>scroll</code> vs <code>hidden</code>. This also did not show any results.</li>
  <li>Even though jQuery can use <code>overflow-y</code> I also tried calling <code>css("overflowY"...</code> using camel case. This also made no difference. </li>
  <li>There aren't any error messages in the browser, and all other related updates for click events are happening.</li>
  </ul>
  
  <p>Here is a larger code sample covering most of what is done:</p>
  
  <pre><code>$(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 &lt;= pageArray.length; i++){
  
          var divName = "div_"+i
          $('#toAppend').append("&lt;div id = '"+divName+"' class = 'unselected' style = 'overflow-x:hidden; overflow-y:hidden; float:left;'&gt;&lt;/div&gt;");
          $("#"+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 &lt;= 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 &gt; 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 &lt; 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");
  
                  }
  
  
              })
      }
  </code></pre>