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.

Also added $.fn.tinyscrollbarUpdate() method, for window resize events. Thumb min size (very helpful for long lists). Improved selectors speed and heights calculation.

Please check it out and if makes sense - standalone version update is required as well.

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.

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.

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.

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: https://github.com/wieringen/tinyscrollbar/pull/51

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.

jQuery ought to be loaded as a dependency in an AMD environment; the jQuery browser global detection should be removed from the factory function.

https://github.com/umdjs/umd/blob/master/jqueryPluginCommonjs.js

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>              

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?

Nested scrollbars are currently broken in regard to the wheel event. When you try scrolling the inner scrollbar the outer scrollbar is also scrolled.

Stopping the wheel event makes this work as expected. I'm not sure if / what drawbacks could this introduce, for my testcase this seems to work just fine.

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?

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.

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);
}

Found an edge-case when after some intensive scrolling in FireFox - evntObj.deltaY at one point is zero. And since evntObj.wheelDelta is undefined, the wheelDelta variable becomes NaN. Which breaks further scrolling (as visible from screenshots below).

The fix added - falling back on zero, if any of evntObj.deltaY || evntObj.detail || (-1 / 3 * evntObj.wheelDelta) is falsy.

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.