Custom Scroll for DHTMLX Components

| Comments (14)

With the latest version of DHTMLX, you can add custom scrolls to the DHTMLX components, such as Grid, Tree, Layout, DataView, and others. The custom scroll looks and behaves similar to scrolls on Mac OS. The scroll bar is hidden and appears when the user start scrolling. It also gets wider on mouse over.

dhtmlxGrid with custom scroll

To enable custom scroll feature, you need to download the required files (customscroll.js and customscroll.css) and add them to the page after the dhtmlx library:

<link rel="stylesheet" type="text/css" href="customscroll.css">
<script type="text/javascript" src="customscroll.js"></script>
<script type="text/javascript">
       dhtmlx.CustomScroll.init();
</script>

After that, all DHTMLX components on the page will use custom scrolls. You can download the demo to see how it can be used with dhtmlxGrid.

Comments

  1. Unreal June 18, 2013 at 4:07 pm

    one bug: no scrollbar when rendered? but then you expand some nodes with your mouse and it should be there now? sorry, you have to mouse out and mouse back in for the scroll to appear. Should be quick to fix, I hope, cuz its sweet! Using chrome…

    • Stanislav June 20, 2013 at 2:27 pm

      Thanks for problem report, we will collect all fixes and will release an updated version in few days.

      • Max September 1, 2015 at 5:52 pm

        Any chance you can roll out an updated version of customer scroll including mentioned here bug fix?

  2. Unreal June 18, 2013 at 4:11 pm

    one other thing I wish could be fixed…the scrollbar appears on mouseover, even if the browser doesnt have scroll focus….im sitting here moving my mousewheel like its going to do something…but I need to click the browser first

    • Stanislav June 20, 2013 at 2:27 pm

      This one is based on browser’s behavior and unfortunately can’t be controlled from script.

      • Unreal July 4, 2013 at 4:38 pm

        I think you’re right, I cannot find a workaround, either.

        Any update on fixing the scroll when an event occurs to resize the scrollable area?

  3. Unreal June 18, 2013 at 4:12 pm

    oh yeah, Im using treegrid!

  4. Unreal June 18, 2013 at 4:14 pm

    if a drag drop event changes the size of the scroll area, the scroll position and range doesnt adjust itself…mouse out and mouse in required to update

    • Igor June 21, 2013 at 8:35 pm

      Tried your demo, works fine in Chrome and FF, does not work in IE8/9, have not tried in IE10 yet. In IE it does hice real scrollbar and you can still scroll by pageUp and Down or arrow keys, but when you mouse hover fancy scrollbar does not appear.

  5. Unreal July 10, 2013 at 4:41 pm

    $(‘.objbox’).each(function(){dhtmlx.CustomScroll._mouse_out_timed.call(this);})

  6. Unreal July 10, 2013 at 4:48 pm

    I tried this and it almost works, but you need to move the mouse just a bit:

    yourgridvar.attachEvent(“onOpenEnd”, function (id, state) { $(‘.objbox’).each(function () { dhtmlx.CustomScroll._mouse_out_timed.call(this); }) });

  7. Unreal July 25, 2013 at 1:50 pm

    Turns out my solution doesnt work with the horizontal scroll bar, though. If you expand to cause a horizontal resize situation, the horizontal does not resize.

  8. Thiago October 24, 2013 at 11:27 pm

    That scroll doesnt work with Scheduler. I’m trying to use it with the timeline scheduler .

  9. ZeroCool February 20, 2014 at 6:09 pm

    I’m using dhtmlx grid in firefox…why that when I drag scroll bar and the pointer is out of the bar, the cells in the grid are being highlighted.

Leave a Reply