at line 237 in jquery.tinyscrollbar.js
why not:
else if(self.options.wheel && window.attachevent)

It would be nice to have a minimum thumb size when it is set to 'auto'. Otherwise, if there is a lot of content in the scroll window, the thumb will become extremely small, almost impossible to grab.

The scroll bar thumb is not dragable in Chrome on Windows 8.1. Clicking within the scroll bar's container doesn't move the thumb or the content either. This issue occurs when trying to interact with the scroll bar using the touchscreen and the mouse.

I use update 'relative' to keep the current position of the thumb after dynamically changes of the content.

When the size of the overview does not exceed the viewport, the scrollbar is disabled automatically (as desired), but...

• the overview is positioned bottom of the viewport (vertical scrollbar)
• the overview is positioned right aligned (horizontal scrollbar)

If I change the window size, the tinyscrollbar keeps this "wrong" position by changing the left/top position although the scrollbar is disabled.

In my opinion the script should align the overview top/left as soon, as the scrollbar is disabled (on any kind of update method).

I noticed this after I updated to the current version, so I guess it's a bug.

It seems that tinyscrollbar misplaces the content at the bottom if the viewport is smaller than the box which has the scrollbar.

Please see the fiddle:
http://jsfiddle.net/cdjQk/23/

I'm facing 4 issues.

1. the mouse scroll doesn't work in latest IE 11 and FF 38.0.1 while over an iframe (youtube in my case).
2. the touch scroll doesn't work while touch occurred in the iframe (youtube again).
3. scroll is super sensitive on mobile for long pages.
4. normal mouse wheel scroll in FF gets stuck when you scroll to the end and top of content a few times. it's happening on the demo site too. so I think it's important to resolve this first.

Is there anyway to solve these 4 problems?
Thanks.

Why won't you make it to add the markup automatically? Like user provides a selector for the container and the rest is done by plugin. Shouldn't add that much code.

I'm wondering how you could go about destroying the scrollbar so you detach the events and hide it by using the disable class. Right now it doesn't work to well when i have a view thats constructed and destroyed at a later point. I'm noticing it work the first time but then when i close and open the dropdown it's all messed up and the scrollbar doesn't work. So it seems like some kind of garbage collection with events is going on.

Using Tinyscrollbar (jQuery) in a horizontal desktop implementation, I am finding that clicking along the track is providing jagged and inaccurate movements rather than accurately navigating the scrollbar.

Dragging the thumb or navigating via mousewheel both are accurate.

Hello

The problem is the following. Initialize and positioning $(document).ready(). But sometimes, at the time positioning of the content is not drawn until the end. The result is that the actual size is larger than the calculated and part of the text hangs over the bottom border.

While doing the initialization in $(window).load().

But maybe there is some solution to the problem?

Wheel event doesn't work on IE11 with horizontell scroll, but it works on vertical scroll.
Tested on the demo scroll, same thing there.

Uncaught TypeError: Cannot read property 'offsetHeight' of undefined

The touch to scroll doesn't work on Edge. It could be nice to have the possibility to scroll with touch on Edge.

In Firefox OS X, scrolling was problematic. I found that scrolling the various panels would become periodically unresponsive.
I have 4 panels with the scrollbars. I periodically do update() on one of them.
I can't said what exactly causes the problem.
Calling update() on the broken one fixes the problem, but it's not a solution.
Chrome and Safari didn't have this issue. The problem is in the latest FF on latest OS.
On Windows it works fine.

I think scrollbar.update('bottom') it should be align at the bottom only if does not fit in the viewport.
ie instead of

case "bottom":
    this.contentPosition = this.contentSize - this.viewportSize;
    break;

use

case "bottom":
    this.contentPosition = Math.max(this.contentSize - this.viewportSize, 0);
    break;

what do you think?

I am using tinyscrollbar in a mobile webapp with a horizontal scroll.

The functionality of being able to wheel down and up to scroll left and right is desirable on desktop but I need to disable this functionality on mobile.

I don't see an option to do this yet, is there any guidance for what I'd need to do in the plugin's code? This is for the jQuery plugin.

It seems there are many open issues and pull requests which can be solved.

Currently there are way too many custom scrollbar solutions on GitHub and no real collaboration between projects and everyone reinvents the same. Would be great to see a few great solutions instead of many with not enough support by the community.

Is written in their feature that it works on touch devices, is it really ?
Even your examples on your website do not work on IOS 8 safari on iphone

Heya guys, so far I love this plugin, lightweight and gets the job done, and gives you a little extend-ability. (only complaint is css needs a little work out-the-box)

One thing I notice though, is the wheelLock: false works on a desktop, but when in Android Chrome, it does not work (this is where I feel it is needed the most, as at times the scroll box may take up the full window, and you should have some way to scroll out of that div and back into the page on mobile).

Anyway, awesome code guys keep it up, it would be awesome if I can get a fix on this without having to dive into the code, but may end up doing it anyway and reporting back here. Please let me know if anyone has already fixed this, it would be of great help on a large project I am working on.

Thanks.

Scrolling by dragging content on touch devices (reverse scrolling) works on Android and iOS devices, but not on Windows Phone 8 devices.

Noticing the following issues with named anchors (i.e. #terminology) within scrollbox content:

1. navigating manually to a url that includes a location (i.e. mysite.com/my-page#myloc):
   • content is in the correct location
   • thumb is not in the correct location. it's set to 0
2. clicking a link on a page which links to a location on the same page:
   • nothing happens other than the url updating

As infinite scrolling becomes more and more important these days tinyscrollbar should provide the possibility of this feature.

As jQuery has a very simple way of event triggering it is very easy to trigger an event if the user comes to the end of content while scrolling/dragging.

And it should be easy to extend tinyscrollbar with this feature.

Firefox 28 on OSX 10.9.2

I'm experiencing a 'leak' where if I use the trackpad to scroll an element, the page also scrolls at a different rate, creating an odd parallax-type event. When I was testing this did not seem to happen on Firefox on Win7. This happened on my own page and the plugin's demo page. Anyone else seeing this issue?

Edit: I think I have found the issue. Will file a PR when I have time.

When i try to highlight text on touch event, the text does not highlight, because the body is assigned class .noSelect in the ontouchstart event.

function _start(event, gotoMouse) {
if(self.hasContentToSroll) {
$("body").addClass("noSelect");
....
}
}

Maybe, you should assign .noSelect to the ontouchmove event. Is there a reason why .noSelect is assigned to the ontouchstart event?

There is a bug with the line 210 at least in Firefox using a trackpad from a Macbook pro:

wheelSpeedDelta = -(evntObj.deltaY || evntObj.detail || (-1 / 3 * evntObj.wheelDelta)) / 40

When evntObj.deltaY is equals to 0, it goes to evntObj.detail which is also equals to 0, which goes to (-1 / 3 * evntObj.wheelDelta) returning a NaN.

Also only the deltaY is used even if the axis is set to x.

Here is a pull request that correct this issue:
#51

Hello
I found to use drag scroll bar not working on firefox(29.0).
It's depend with "ontouchstart".
I fixed as below:

, hasTouchEvents = (navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i)==null) ? false : ("ontouchstart" in document.documentElement)

Is it correct?
Maybe have the better solution, I think.
Sorry for my English and thanks for your help.

I've spotted a bug when using your library in a responsive context: when the scrollbar is inactive (which is the case in our tablet/mobile responsive breakpoints), it still catches the touchmove events and prevents the page from scrolling. It's specially annoying when the scrollable content take all the available screen space ;)

To solve the problem, I've changed these lines :

document.ontouchmove = function(event)
{
    if(self.options.touchLock || isAtBegin() && isAtEnd())
    {
        event.preventDefault();
    }
    drag(event.touches[0]);
};

By:

document.ontouchmove = function(event)
{
    if((self.options.touchLock || isAtBegin() && isAtEnd()) && (self.contentRatio < 1))
    {
        event.preventDefault();
    }
    drag(event.touches[0]);
};

And it seems to work fine! However, I am not sure what these lines are supposed to do in the first place, so please double-check the suggested fix.

Please give a proper example of horizontal scrollbar. { axis: 'x' } is not enough.
Replacing the image in the css don't work also:(

I'm having a problem with the plugin, which I've detailed on Stack Overflow:

http://stackoverflow.com/questions/23161975/using-tinyscrollbar-meteor-package

Thanks!

Apologies if this is a duplicate, or already covered.
I found the scrolling speed really slow in Firefox (PC version, Windows 7, v32 and v33), in both my implementation and the demo pages.

My guess is that Firefox is calculating the wheel event DeltaY values quite differently to other browsers.

I would see Firefox with a DeltaY value of 3 - vs a DeltaY value of 88-100 in Chrome and IE.

My clumsy fix was to check if the browser was new Firefox and account for the “/40” to get the values closer.

if((evntObj.mozMovementY) && (evntObj.type === "wheel")) {
        wheelSpeedDelta = wheelSpeedDelta * 40;
}

This was added to the function wheel(event) - after the vars are declared. I guess it would have been smarter (in my fix) to update the initial var wheelSpeedDelta declaration.

Hi!

In my case I use tinyscrollbar for scroll sidebar menu.
Sidebar has fixed position and 100% height.
When I resize browser window by horizontal in a big way and overview(.overview css class) of menu placed to viewport(.viewport css class). Overview of menu begin stick to bottom of viewport.
I think it is not a correct. The menu must stay on the top.

Now i fixed that:

case "relative":
    this.contentPosition = (this.viewportSize < this.contentSize)
        ? Math.min(this.contentSize - this.viewportSize, Math.max(0, this.contentPosition))
        : 0;
    break;

What will you say?

P.S.: Sorry for my English

I would like to add Tinyscoll to my projects using Bower, which is pretty simple and convinient.

This is up to you, you should (or not) do that. Here are instructions: http://devhike.blogspot.sk/2013/06/how-to-register-your-library-or.html

Chrome browser supports touch events for laptops with touchscreens, meaning such users are no longer able to navigate with the mouse due to this code:

if(hasTouchEvents) {
    $viewport[0].ontouchstart = function(event) {
        if(1 === event.touches.length) {
            event.stopPropagation();

            _start(event.touches[0]);
        }
    };
}
else {
    $thumb.bind("mousedown", function(event){
        event.stopPropagation();
        _start(event);
    });
    $track.bind("mousedown", function(event){
        _start(event, true);
    });
}

Any ideas on how to remedy this? I lose control of the scrollbar entirely in Firefox on scrolling up or down until issuing an update command.

I was looking at the popularity of this plugin and I was shocked to just over 100 stars...

I think it would be a good idea to work on the following:

-update your documentation and include what you have on your demo site that works on local
-demo site should be mentioned in the main plugin git page anyway
-update jquery on your docs, currently 1.7.2 :-/
-Add in the docs clean/simple "how tos" and leave the "var" for the advanced users.

Lastly these options should definitely be implemented to this great plugin:

• smooth scroll (it could use transform: translate(blah blah); )
• hide/unhide with mouse hover (mouse enter , mouse leave)

What do you think?

Hi.

I've found bug in demo http://baijs.com/tinyscrollbar/ (browser Google Chrome & Firefox, didn't test in other). When you load page and click on scroll track in first example (scrollbar right after features section), content is scrolled to bottom. After this any click on scroll track does not change scroll position (it's always at bottom).

BTW, links to Demo, Docs & Bag Report links are incorrect on http://plugins.jquery.com/tinyscrollbar/ page.

I have a page where I have 2-3 containers placed vertically on the page and I am unable to scroll up or down in the IPad, as whenever I swipe up or down it simply scrolls the items in the container horizontally rather than scrolling the page vertically. Thereby blocking the user to scroll the page vertically. Need an urgent fix as it is completely blocking user to scroll in touch devices.

Though you've dropped all the spaces from scrollbar code in examples, they're still selectable under some arcane circumstances in Chrome. I think it's a good idea to add user-select property into scrollbar's CSS classes.

Hello! I LOVE your tinyscrollbar script. Thank you for sharing it!!

I have a single page that has 2 tinyscrollbars on it. The first one functions perfectly so I duplicated it, added a second style (same) but the 2nd one won't function. I deleted the 1st one and that makes the 2nd one work.

I'm guess I'm just missing something simple and obvious here.
Here's my page - bottom middle area of homepage: http://www.greenturf.org/
CSS: http://www.greenturf.org/tinyscrollbar.css
I did put the .js files in a "js" folder but I changed that path in the head code.

If it helps, Here's my code from the homepage:

SCROLLBAR #1

        <div class="viewport">
             <div class="overview"><br /><?php foreach ($news_eventsRecords as $record): ?>
                  <span class="hmFeedTitle"><a href="<?php echo htmlencode($record['_link']) ?>"><?php echo htmlencode($record['title']) ?></a></span><br />
                  <span class="hmFeedTxt"><?php echo $record['homepage_teaser']; ?></span><br /><br />
                  <?php endforeach ?>
                  </div>
        </div>
    </div>      

        <div class="viewport">
             <div class="overview"><br /><?php foreach ($blog_feedRecords as $record): ?>
                  <span class="hmFeedTitle"><a href="<?php echo htmlencode($record['link_to_article_page']) ?>"><?php echo htmlencode($record['title']) ?></a></span><br />
                  <span class="hmFeedTxt"><?php echo $record['homepage_teaser']; ?></span><br /><br />
                  <?php endforeach ?>
                  </div>
        </div>
    </div>              

Hi,

Just noticed that this isn't working with the new iOS10.

Thanks,
Tom

Scrolling works fine, but you cant use it dragging the thumb on the scroll bar, it just wont move.
(Tried on http://baijs.com/tinyscrollbar/)
Any fixes for that?

The common behavior in case of the event when one presses on the background of scroll bar is that it scrolls immediately on mousedown, not on mouseup as it is implemented.

I would like to know if there's a set codes in your TinyScrollBar, since I already use the given codes from your site but looks like nothing happen or maybe there's a wrong position in my codes.

$('#metro').tinyscrollbar({ axis: 'x', wheel: false, wheelLock: true });

Here's what my issue was.
When a mouse start to scrolldown and get hovered at the "Metro" slider, it will scroll the content. But I would like to pass that and continue scrolldown the entire whole page. So i gather your codes and tried it, but yeah, not sure what was wrong in my code and nothing happen.

What is the feasibility of modifying the touch based scrolling so that it gains momentum based on the gesture? Right now, its linear. It would be great if there was an option, really it would likely be default, to have this replicate the scrolling you see standard in iOS and Android.

Demonstration: On this page https://baijs.com/tinyscrollbar/ ctrl+f merychippus will result in 1 of 3 matches, but will not automatically scroll to the location, though the automatic highlighting does work when you manually scroll.

Thanks :)

Hi,

On Chrome latest version (Version 33.0.1750.154 m), I'm executing my webapp as a popup chrome window and as a normal tabbed window.

The popup one is buggy, its scrollHeight is bigger with 1px difference than the offsetHeight :

In the update() method :
this.viewportSize = $viewport[0]['offset' + sizeLabelCap];
this.contentSize = $overview[0]['scroll' + sizeLabelCap];

The result is in my popup I have a scrollbar whereas in the tabbed one, I don't.

This is not how you detect and handle touch capability:

var hasTouchEvents = ("ontouchstart" in document.documentElement)

/* ... */ 

if(hasTouchEvents) {
    $viewport.ontouchstart = function(event) { /* ... */ };
} else {
    $thumb.onmousedown = function(event) { /* ... */ };
    $track.onmousedown = function(event) { /* ... */ };
};

The hasTouchEvents boolean value will be true on all desktop browsers that implement the touch event API, like Firefox and Chrome, and have, have-had or may at some time have touch-capable devices hooked up that make the OS report touch support. Those browsers are not necessarily using touch input at the moment at all.

Disjoint branching of event bindings for mouse/touch based on this boolean means anything based on mouseup/mousedown such as the drag & drop behavior, can randomly be completely broken on desktops.

You should rewrite this to use joint mouse/touch interaction support instead.

Sorry for my bad english :).

Update to N px issue - content bottom must be at the bottom of viewport.

How to check this issue.
I have in content some blocks (elements). I try to dynamically scroll to this elements.
Call method update(element.top), if this is last element there is space above it instead to place this item
at the bottom of viewport.

How to fix:

//after line 184: check if content bottom is the same as  viewport bottom
    if((this.contentSize - this.contentPosition - 1) < this.viewportSize){
            // set viewport bottom = content bottom
	this.contentPosition = Math.max(this.contentSize - this.viewportSize, 0);
}