Integrate jScrollPane with GWT

  • Posted on: 21 May 2014
  • By: Zhijun Chen

jScrollPane is a cross-browser jQuery plugin which converts a browser's default scrollbars into an HTML structure which can be easily skinned with CSS. It is very helpful if you need a cross-browser style scrollbar.

If you build your web application using Google Web Toolkit (GWT), the easiest way to integrate jScrollPane is using JavaScript Native Interface (JSNI) feature of GWT. JSNI allows you to integrate JavaScript directly into your application's Java source code. The detail guide for JSNI in GWT can be found here.

Download jScrollPane and related files from here and include them inside your main page as follows:

  <link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" />
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src="script/jquery.mousewheel.js"></script>
  <script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
  <script type="text/javascript">
    <!-- The following code will enable us to use jQuery as keyword instead of $ -->

Now that we are able to use jScrollPane, we can integrate it into GWT using the following JSNI code.

public native void initCustomScrollbar(String id) /*-{
    var settings = {
        autoReinitialise : true,
        horizontalDragMaxWidth : 0

    $wnd.jQuery('#' + id).jScrollPane(settings);

We need to set an id on GWT widget then call this method when it is needed (could be inside a GWT DeferredCommand):

FlowPanel scrollPanel = new FlowPanel();
// This method may be needed to put int a scheduler deferred command

Now you should be able to wrap all methods in jScrollPane through JSNI by access api as follows:

var api = $wnd.jQuery('#' + id).data('jsp');


Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.