Add a custom scrollbar to your twitter widget

Add a great-looking and highly customizable scrollbar to your twitter widget.

Create a div in your HTML that’ll hold the widget

<div id="twitter-widget-holder"></div>

and apply a CSS height/max-height to it, along with any other properties you might want. For example:

#twitter-widget-holder{ max-height:400px; max-width:320px; padding:20px; background:#fff; border-radius:3px; box-shadow:2px 2px 3px rgba(0,0,0,.1); }

Go to twitter.com/settings/widgets and login to create your widget. Get the code and insert the anchor part of the code (<a />) inside your widget holder div (save the script part of the code for later):

<div id="twitter-widget-holder">
  <a class="twitter-timeline" href="https://twitter.com/user" data-widget-id="12345">Tweets by @user</a>
</div>

Add the attributes width, data-chrome and data-tweet-limit to .twitter-timeline anchor, changing the width and tweets limit values as you like:

<div id="twitter-widget-holder">
  <a class="twitter-timeline" href="https://twitter.com/user" data-widget-id="12345" width="280" data-chrome="transparent noscrollbar" data-tweet-limit="10">Tweets by @user</a>
</div>

The important part is to set a tweet-limit and add the value "noscrollbar" to data-chrome attribute, as we want to replace browser’s native scrollbar for a custom one.

Include jQuery as well as custom scrollbar plugin script and CSS files to your HTML (e.g. inside head tag). You’ll probably want to download the plugin but for simplicity’s sake we’ll load them from Google and Github CDN accordingly:

<!-- custom scrollbar CSS -->
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css">
<!-- jQuery lib -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- custom scrollbar plugin script -->
<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

Create a new script in the head (or body) tag that’ll hold the script part of the twitter widget code and the scrollbar initialization function. The code should run when the page is loaded:

<script>
  (function($){
    $(window).load(function(){
      /* initialize scrollbar */
      $("#twitter-widget-holder").mCustomScrollbar({
        theme:"dark-3",
        scrollButtons:{enable:true}
      });
      /* insert twitter widget js in window load fn */
      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    });
  })(jQuery);
</script>

Note that the scrollbar is applied to #twitter-widget-holder div which should have a height/max-height value specified (in this example 400 pixels). When the twitter widget becomes longer than its holder, the scrollbar will appear.