title: Custom Scroll Bars That Enable/Disable on Mouse Click
body: <p>I've got a table of films. To keep each row reasonably short while including a synopsis and list of special features, I've created a ".synopsisSmall" div with a heigh of 20px. Inside that is either a ".synopsisFull" div or a ".Extras" div. ".synopsisSmall" expands to the size of its child when clicked. ".Extras" has a max-height of 200px, because some of the lists were just getting out of hand. I set its overflow to scroll, but then it became scrollable even collapsed, so I set its overflow to hidden and changed the code:</p>
  
  <pre><code>$(document).ready(function(){
      //Tag all rows as collapsed
      $(".synopsisSmall").attr("isclicked", "notclicked");
  })
  $(document).ready(function(){
  $(".synopsisSmall").click(function(){
      //Determine which row has been clicked on, and how tall its full contents is in each column
      var clickedID = $(this).attr("id");
      var synopsisHeight = $("#" + clickedID + ".synopsisFull").height();
      var featuresHeight = $("#" + clickedID + ".Extras").height();
      //Check if row is collapsed or expanded
      var currentHeight = $(this).attr("isclicked");
      //If collapsed, animate the row height to either the height of the synopsis or the height of the special features, whichever is greater
      if (currentHeight == "notclicked") {
          if (synopsisHeight &gt; featuresHeight) {
              $("#" + clickedID + ".synopsisSmall").animate({"height":(synopsisHeight + "px")}, 500); }
              else {
              $("#" + clickedID + ".synopsisSmall").animate({"height":(featuresHeight + "px")}, 500); }
          //Make it scrollable
          $("#" + clickedID + ".Extras").css({"overflow":"auto"});
      //And tag it as expanded
      $("#" + clickedID + ".synopsisSmall").attr("isclicked", "clicked");
      //Collapse any expanded rows, and tag them as collapsed
      $(".synopsisSmall").not("#" + clickedID).animate({"height": "20px"});
      $(".synopsisSmall").not("#" + clickedID).attr("isclicked", "notclicked"); }
      //Otherwise, if the clicked row is already expanded, simply collapse it and disable scrolling
      else { $("#" + clickedID + ".synopsisSmall").animate({"height":"20px"});
      $("#" + clickedID + ".Extras").css({"overflow":"hidden"});
              //And then tag it as collapsed
              $("#" + clickedID + ".synopsisSmall").attr("isclicked", "notclicked"); }
  })
  });
  </code></pre>
  
  <p>Only problem is the scroll bars look ugly and take up a massive amount of horizontal space. So I did some Googling, and found a jQuery plugin called NiceScroll. Added the following below the line enabling scrolling:</p>
  
  <pre><code>$("#" + clickedID + ".Extras").niceScroll();
  </code></pre>
  
  <p>But now, when collapsed, it remains scrollable. And if re-expanded, NiceScroll's scroll bar sticks around, while the default scroll bar pops up behind it, looking ugly and taking up space.</p>
  
  <p>Is there a way I can pull this off?</p>
  
  <p>ETA: <a href="http://jsfiddle.net/b9gy551w/" rel="nofollow">Here's</a> a JSFiddle link to what I had without NiceScroll. Not sure how to get the NiceScroll code in there, but basically when I try to use it the scroll bar doesn't disappear, and the content remains scrollable.</p>