thomd / jquery-scroll

a jquery plugin rendering a custom, CSS styleable vertical scrollbar for overflowed elements.

jQuery Scroll

a jQuery plugin which renders a custom, CSS styleable vertical scrollbar for arbitrary overflowed content.

Unit Tests

jquery-scroll contains unit-tests based on Googles js-test-driver.

Usage:

Starting the server & automatically launch the browsers and capture it (browser paths for Safari, Firefox & Chrome are OSX paths):

> cd jquery-scroll/tests
> java -jar lib/JsTestDriver-1.2.2.jar --port 8448 --browser lib/safari.sh,lib/firefox.sh,lib/chrome.sh --config scroll.conf

Running the tests:

> java -jar lib/JsTestDriver-1.2.2.jar --config scroll.conf --tests all

jquery-scroll's Issues

no horizontal scrolling

I could not find an option to use this scroll bar horizontally instead of vertically. Is there any plan to provide that later? Am I missing something?

Images

The plugin does not update when images are loaded, if some handler could call a repaint when an image is loaded within the container, then a scrollbar should aprear.

I'm currently using this function:

// If the scrollbar contains image, we need to wait for those
$(".scrollbar").each(function(){
    var len = $(this).find("img").length;
    if(len > 0)
    {
        var _this = $(this).data("imgloaded", 0);
        $(this).find("img").each(function(){

            this.onload = function()
            {
                _this.data("imgloaded", _this.data("imgloaded") + 1);
                if(_this.data("imgloaded") == len)
                {
                    _this.scrollbar({
                            arrows : false
                          });       
                }
            }

            // Reset the SRC to catch onload
            var src = this.src;
            this.src = "";
            this.src=src;
        });
    }
    else
    {
        $(this).scrollbar({
                            arrows : false
                          });   
    }
});

Thanks for the great work!

Mousewheel not working

Mousewheel is not working on the 0.4 version. I just updated the jQuery mousewheel plugin and now it seems to work.

The version of mousewheel im using:
Download from: https://github.com/brandonaaron/jquery-mousewheel/downloads
Version: 3.0.6

recreate

hi, how i can recreate scrollbar on ajax response so onchange div height ?

MouseWheel Scroll speed

The MouseWheel Scroll speed is very slow (tiny increments). What would be the best approach to increase it? OR could you implement a property like 'arrows' to set it.?

Exception on scrollbar('scrollto', 'bottom')

Hey, guys! I've found an error in library: on 172 line

scrollto: function(to){
    return this.each(function(){    
        this.scrollbar.scrollto(to);
    });
},

if there are no enough content in my div, then scroll bar will be not enabled. So, if I call:

$('div').scrollbar();
$('div').scrollbar('scrollto', 'bottom');

, there are some trowed exception, cause this.scrollbar is undefined (or null, I don't know).

how I fix it:

scrollto: function(to){
    return this.each(function(){
        if (this.scrollbar !== undefined) {
            this.scrollbar.scrollto(to);
        }
    });
},

so after this fix it works excellent and don't throws an exception.

p.s. by English is not so good, as yours, I'm living in Ukraine.

Slow mousewheel scrolling

Hi,

First off, great plugin!

My only issue with it is slow mousewheel scrolling.
Is there anything I can adjust to speed things up?

Thanks!

J

Problem with handle container

Hi, nice plugin :)
After calling repaint method, handle container remains visible all the time (with 1px handle offset) even when it's not needed, content is less than before when the scrollbar was shown...

Problem with overflow(?) scrolling + lightbox

I have problem with scroll at my page. It seems to not load whole text/images if we scroll down too fast and when page didn't load all images for example, scroll stop and sometimes we can see a half of image and nothing more what is beneath. You can see this issue here: http://bialy.tau.pl/?s=136 or in some other link at the page, if we refresh it, it's good. You can see it every time at chrome when it must load whole page from the beggining. But also in mozilla and safari. Also lightbox (http://www.huddletogether.com/projects/lightbox2/) on images does seems not work with scroll script (it's causing probably jquery.1.4.2.js file) I would be glad for any help. Regards

scrollbar("scrollto") should be a getter

$('selector').scrollbar("scrollto") should be a getter, not a setter method

reset scroll settings on resize

is there a way to support div with relative height?

i'm trying to redo the function on resize event, but nothing happens

iphone

Does this work on the iPhone an iPad? It appears to not scroll.

Programmatic Positioning

Is it possible to set the scroll pane to a certain position programmatically? For example:

    var s = $('.scrollable').scrollbar({
        handleHeight: 151,
        arrows: false
    });

   s.scrollTo(500)

Fix for IE7: Under certain circumstances, measurement of content height fails

Was tearing my hair out when container.contentHeight was always returning 0 on IE7, and therefore the scrollbar was never being drawn (as 0 is always less than the container height).

This line fixes it, within $.fn.scrollbar.contentHeight:

var height = wrapper.css({overflow:'hidden', zoom:'1'}).height();

(note the addition of the 'zoom' parameter to force hasLayout on the wrapper element.

how to trigger event on scroll end or infinite scroll implementation

want to try to implement infinite scroll with the scroll bar. I have a load ,ore button in this theme I'm using, if i could trigger an event when the user scrolls to the ned, i could pull it off. Any ideas?

Help getting repaint to work on ajax added content

Im trying to figure out how to get the scroll bar to 'repaint' after content is added to my container via ajax. Im working with wordpress and I used the line:

$('#mydiv').scrollbar('repaint');

right after the ajax call, but i get nothing. think you could help me out?

Thanks :)

Flat out does not work in Firefox

Works in chrome but in Firefox the element to which I'm trying to apply the scroll bar remains unchanged. Have you tested this in Firefox?

ScrollUp

with mouse wheel scroll too slow... How to speed Up scroll?

Mobile

Hello,

I needed some mobile scrolling and made the following code.

Functions to add:

onTouchStart : function(e){
        this.touch = {
            start : {
                y : e.touches[0].pageY
            }
        };
    },

    onTouchMove: function(e){
        // calculate new handle position
        this.handle.top += (e.touches[0].pageY - this.touch.start.y) * 0.01;

        this.setHandlePosition();
        this.setContentPosition();

        // prevent default scrolling of the entire document if handle is within [min, max]-range
        if(this.handle.top > this.props.handlePosition.min && this.handle.top < this.props.handlePosition.max){
            e.preventDefault();
        }
    },

Add the following code to the function appendEvents:

// Touch events
        var _this = this;
        this.container[0].addEventListener("touchstart", function(e){
            _this.onTouchStart(e);
        }, false);

        this.container[0].addEventListener("touchmove", function(e){
            e.preventDefault();
            _this.onTouchMove(e);
        }, false);

Good luck!

Tsukasa

Scrollbar and Tooltip

Hi Thomas,

I'm not sure if you're in the habit of helping folks troubleshoot the fine scrolling js your created, but I am experiencing an issue implementing it on a project. The script is working fine on standard divs, etc, but I am trying to call it inside of a jquery tooltip (http://flowplayer.org/tools/tooltip/index.html) to address potential overflow. I can't get it to work inside the tooltip and I think there must be a conflict with either the timing of the calls or with the fact that the tooltip is hidden until it gets called. Not sure, it's outside my skill set.

If your willing to look at the dev page, go to http://gp.me3design.com

Hover over "Nick's Pick" TPC of Scottsdale, Stadium Course (the div below the image triggers the tooltip). The scrollbars are not picking up your js.

Thanks for your time and help in advance.

Best, Brian

Set Scrollbar Height

Is there anyway to set the scrollbar container height? That would be a very nice option.