[Drupal] How to create a scroll bar for a drupal view using jscrollpane library and drupal scroll bar module

This article will be explaining how to add a scroll bar for a Drupal block.There are certain circumstances, where we need to add scroll bars with a block. If you come across this situation please go through the full article. I have faced a situation to add a scroll bar inside a Drupal block for displaying an article title along with content in a trimmed format. Drupal block already has options to display a number of items inside the block. But if we display all in a single block it will be a big block and is it was not our requirement. If we want to display a block with a particular height you can use the below ideas.

First thing we need to do is download jscrollpane libraries(jquery.jscrollpane.css,jquery.jscrollpane.min.js, jquery.mousewheel.js and mwheelIntent.js). You can download the file by clicking on jscrollpane download. Create a new folder jscroll pane inside the libraries folder and put the first three file there. Create another folder js inside the jscrollpane and put the mwheelIntent.js inside that js folder.

The next thing is some theme change for getting the scroll bar.

For example, if you want to apply the .jScrollPane() function to the field-name-body add the below line inside the css file

  .field-name-body {
    height: 200px;
    overflow: auto;
  }
  

The above document will create a scroll bar for the given block

There is also a drupal module scrollbar. Download the module here and extract the module inside the module folder.

Enable the module.

Go to admin/config/user-interface/scrollbar and configure as you want.

In the configuration there is an option to add Elements to get the jScrollPane function

Also configuration option to Show arrows for scrollbar.By this we can use scroll bar with or without arrow

The above documents works for me. Hope this helps you too.

Also advanced option as well as vertical and horizontal configuration available