This website uses cookies to personalise ads and to analyse traffic ok
web design

Add a custom scrollbar to your twitter widget

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.


6 Comments

Post a comment
  1. Sumitava Das
    Posted on March 29, 2019 at 12:42 Permalink

    $(“.twitter-box”).mCustomScrollbar({

    }).on(“mouseenter”,function(){
    $(this).find(“iframe”).css(“pointer-events”,”none”);
    }).on(“mouseup”,function(){
    if(!$(this).find(“.mCSB_scrollTools_onDrag”).length) return;
    setTimeout(function(){ $(“.twitter-box”).trigger(“mouseenter”); },1);
    });
    $(window).on(“blur”,function(){
    $(“.twitter-box”).find(“iframe”).css(“pointer-events”,”auto”);
    }).on(“focus”,function(){
    $(“.twitter-box”).trigger(“mouseenter”);
    });

    Reply
  2. Sumitava Das
    Posted on March 29, 2019 at 12:38 Permalink

    $(“.tweeter-box”).mCustomScrollbar({
    callbacks:{
    whileScrolling : function(){
    $(“.tweeter-box iframe”).addClass(“none-event”);
    }
    }
    }).on(“mouseenter”,function(){
    $(this).find(“iframe”).css(“pointer-events”,”none”);
    }).on(“mouseup”,function(){
    if(!$(this).find(“.mCSB_scrollTools_onDrag”).length) return;
    setTimeout(function(){ $(“.tweeter-box”).trigger(“mouseenter”); },1);
    });
    $(window).on(“blur”,function(){
    $(“.tweeter-box”).find(“iframe”).css(“pointer-events”,”auto”);
    }).on(“focus”,function(){
    $(“.tweeter-box”).trigger(“mouseenter”);
    });

    Reply
  3. Thomas de Jesus
    Posted on February 23, 2017 at 00:01 Permalink

    Doesn’t seem to work if the site is https

    Any help is appreciated.

    Reply
  4. Lee Hernandez
    Posted on July 2, 2016 at 02:07 Permalink

    hola, buenas :

    Soy nuevo con js, pero al introducir el codigo que has postiado en mi web me genera unos margenes, como hago para quitarlos y adaptarlo a mi web.

    Agradezco me puedas ayudar.

    Reply
  5. Ucef
    Posted on April 28, 2015 at 13:16 Permalink

    I followed this tutorial, the custom scroll displays properly, but the content of the iframe twitter disappeared.
    Can someone help me?

    Reply
    • Ram
      Posted on February 26, 2019 at 07:50 Permalink

      Any solution for this ?

      Reply

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php