jamesflorentino / nanoscrollerjs Goto Github PK

I want to style the scrollbar so that it has 5px of space above and below .pane. In other words, make .pane shorter than .content.

If I use e.g. .pane { margin: 5px 0; } to achieve this, I break the hiding of the scrollbar when it is not needed. This is because nanoScroller checks if the .pane's (inner) height is equal or larger than the content area's height. If the check instead was made using .outerHeight(true) (true to include margins) instead, my restyling would not break the hiding of the scrollbar.

Alternatively, I can add .slider { margin: 5px 5px 5px 0; }. If so, I do not disturb the hiding and it adds spacing above the slider. Below the slider, there is no spacing, since the positioning of the slider does not take it's margin into account.

I hope this either can be fixed in nanoScroller, or that you have an alternative way to style .pane so that it is a bit shorter than .content.

FF 7.0.1

In the latest chrome on windows I'm getting the error:

Uncaught TypeError: Property 'scrollTop' of object #<NanoScroll> is not a function

Being caused by return scrollbar.scrollTop(0); it appears the function scrollTop is conflicting with the variable this.scrollTop in v8 as it seems to work in other browsers.

I fixed this locally by renaming the variable this.scrollTop thats defined in NanoScroll.prototype.preventScrolling to something else.

With this in your CSS you are able to use native iOS momentum scrolling. I did some quick testing it seems that it disables your custom scrollbar and uses the native iOS scrollbar instead.

This could be good to add as a setting that can be enabled.

There are also some downsides listed in jQuery Mobile docs:
http://jquerymobile.com/test/docs/pages/touchoverflow.html

• Sometimes child elements like lists and forms wouldn't render when embedded in a page with overflow: in iOS5. This was a pretty random phenomenon but is not acceptable so we've added a translate-z CSS property which forces iOS to render the contents. The downside with this fix is that when a transform is applied, all elements are set to position:relative which can cause issues in your layout.
• The -webkit-overflow-scrolling:touch property seems to disable the events to scroll you to the top of the page when the time is tapped in the status bar. We hope Apple fixes this because it's a very useful feature.
• When overflow: and -webkit-overflow-scrolling:touch properties are set, iOS appears to ignore any overflow:hidden properties on the parent, which is the page in our case. So if you have an image or code block that is wider than the viewport, horizontal scrolling will be seen.
• When this feature is active, we are disabling user zoom by manipulating the meta viewport tag because both the toolbars and page content can easily be zoomed to an odd size and it's very difficult to zoom back out. Even though we believe in allowing users to zoom the page, alleviating the usability concerns we have with fixed toolbars and overflow containers is more important.
• Scroll position can be lost when going back to a page that has been re-loaded. If DOM caching is on, this shouldn't be as much of an issue.
• This is still an experimental feature, so not all the kinks have been worked out yet. Use with caution and test thoroughly.

If user scrolls to the section and hides it, on showing the section again the content is set to top but the scrollbar is on previous position.

Hello

I'm using Firefox 11.0 under Ubuntu 11.10 . Unfortunately nanoscroller is not working and my firebug console throws

NanoScroll.name is read-only
this.el.nanoScroller is not a function

Under chromium 18.0.1025.142 (Build 129054 Linux) Ubuntu 11.10 everything works ok with same sourcecode

When scrolling with the mousewheel and the div content reaches the end then outer page starts to scroll. Btw I use mouse without clicking mousewheel and it is is really fast.

Demo - http://www.hp.io/nanoscroller/a.html

Chrome 16.0.912 - problem
Opera 11.60 is mixed bag
FireFox 8.0 and 9.0.1 are fine

BTW Nice work!

Obviously this is intentional. But nonetheless, can I make it always visible?

Also to change its height (older people struggle with very small text and widgets).

How about adding a max height for the slider so you make it's dimensions fixed, like in this example: http://jscrollpane.kelvinluck.com/drag_size.html

On Android version 2.3.3, native browser, nanoScroller is not working.

When tapping with the finger on the scrollable area, slider and pane appeared on the right side of div. Then, when sliding the screen with a finger, the page moving up or down completely, not just the scrollable part of the page.

Reminder to self: Upon testing in FireFox 12.0 event.offsetY is undefined causing the visuals for when you click on the .pane element look funny.

Hello,

In the example http://citmake.com/lionbar/ have a box inside the other, both with nanoscroller. The problem is that when I move the mouse over any box, all bars are displayed.

What do you suggest to fix this?

Thank you!

When i scroll down once it doesnt slide the slider down.
When i scroll down a second time it scrolls down to the position i was before the scroll.

My guess is that it executes the previous event.

Hi there,

don't know if I'm doing wrong but I've got a little error.
Using nanoScroller with {scroll: 'bottom'} works perfect for me but the slider position is not updated and so it's still at the top.

Refreshing the scroller with $("#about.nano").nanoScroller(); has no effect.

I'm usign FF 12...

Nice plugin, is there any planned development to support touch events for mobile and tablet devices?

When the content height is getting very long, the slider gets shorter until it disappears, we need to set a minimum height for the slider so it doesn't disappear.

Seems if we use overflow:hidden to the content will solve the issue

It'll be brilliant if you add a feature to prevent page scrolling when the nanoScroller inside a div reaches the top or bottom.

Similar to the scrollers on Facebook chat and ticker. Scrolling further after reaching the end doesn't scroll the page.

thanks!

Anyway to make the scrollbar not autohide until hovering into the panel? Looked through the source but doesn't seem to be an apparent way to turn it off.

Thanks

When I'm using multiple nanoScrollers on a page, only for the first one the OS native scrollbars are hidden. Other element have a native scrollbar and a nanoScroller scrollbar.

Specs: OSX Lion + FF 8.0.1, Safari 5.1.2, Chrome 16.0.9

If the scrollable element has "overflow: scroll;" or "overflow-y: scroll;" the slider should be visible and have the height to fill the whole slider pane, "even if there is nothing to scroll".

Normal, doesn't matter if it's "overflow: auto;" or "overflow: scroll;"

There is nothing to scroll, the slider should be still shown if it's "overflow: scroll;" or "overflow-y: scroll;"

It appears that pagedown/pageup scrolls exactly 490px

if (key === KEYS.up || key === KEYS.pgup || key === KEYS.down || key === KEYS.pgdown) {
  scrollLength = key === KEYS.up || key === KEYS.down ? 40 : 490;//<--------------
  percentage = scrollLength / (this.contentHeight - this.paneHeight) * 100;
  sliderY = (percentage * this.maxSliderTop) / 100;

I think it should be something like

  scrollLength = key === KEYS.up || key === KEYS.down ? 40 : (this.paneHeight * 0.9);

First off, I want to say that the scroller behavior is pretty nifty. Thank you.

I would like to know if there is a way to refresh the scrollbar once content has been added dynamically (through ajax for example.)

Cheers

Hey James,

Your library looks really slick, congrats! Any plans to add a horizontal mode to the library? This would make nanoScroller simply perfect.

Somehow, even after calling $(scroller).nanoScroller(); the scroller within the scrollbar remains tiny. Is there any known issue that could be causing this problem?

I have noticed that when you are dragging the slider to the top or bottom. The custom 'scrolltop' & 'scrollend' events don't fire.

Also in firefox if you click on the pane the slider doesn't go to that area, like other browsers.

Don't know if these is classed as a real issue but thought i'd bring it to your attention.

It tries to assign name, which obviously doesn't work. I removed "use strict" and it compiles fine.

I've been unable to use this plugin to replace iframe scroll bars. Has anyone had luck with this?

What about creating a ratio between the pane height and the content height, and make ur calculations based on this?

use example is if i want to make a fixed height scrollbar, and the content area have different heights, something like the example on the right of this page:

http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

providing such a way is great, specially when u want to create totally customized scrollbars.

Hey, great plugin however I've noticed that upon up/down keypresses the content scrolls but the slider does not, this is also the case with page down. Ideally shouldn't it be updating the slider position?

Changes introduced in 0.5.7 broke nanoScroller in iOS5, and possibly in other mobile devices too. Trying to fix this when I have time.

Great plugin, thanks for it! Works a charm for my project.

With Facebooks scroll bars and Mac OS X Lion scroll bars the bar fades out after the scroll event has finished even if the mouse is still hovering over the element. I think this would be a good feature to add to this plug in.

I have a feature request for configuration - "scroll_end" with options "native" or "stop_on_end". Thank you!

I've tested the plugin on different OSX machines and when it comes to Chrome and Safari on some of them I noticed that the container has too much padding on the right side.

As I understood it has to do with the function getBrowserScrollbarWidth() then is retrieving the wrong width. Is this a know issue?

Is there a way to fix it?

Here is how it looks on Firefox

and here Chrome

I know they are not on osx, but it would certainly be nice to be able to enable them in the options.

As this plugin grew up further than to recreating osx lion bars, it's one of the best plugin to create a customized scrollbars generally, and I'm sure many people use it that way.

When I use the arrow keys to select elements in an

the container does not scroll. It works as expected with native scroll bars.

if I init nanoscroller, then remove its div contents ($(".nano").html("");), then fill it again and init nanoscroller again, it fails(without any error), I suppose that if there was a destroy method which I could call along with contents removing, it should work fine..

example here http://jsfiddle.net/chU2N/

I get a weird js error in console and the scrollbar doesn't work at all. It says I have an error in your script at line 215 :

contentStyle = content.style;

The above would be the line, Additional info, it also says that it cannot read the property "style" of undefined. So what can I do about that ?

Hello again,

here is another challenge if you are up to it. In my project I'm using this nice plugin by attaching the nanoscroller to the entire body of the document.

The problem comes when it is applied to the iphone and simultaneously wanting to hide the address bar with this script:

$(window).load(function () {
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});

Obviously by doing so I need to increase the height of the nano container by the height of the address bar. So far is all good since the bar disappears leaving more real estate for the content, but as soon as you start to scroll down and then back up the address bar stays instead to disappear again.

This seems like a complex problem to me, do you have any idea how you could get around?

Appreciate your help.

I am trying to absolutely position an element inside content that overflows to the left. I am unable to make the part of the element left of the content div show.

IE7+

I have been testing out a bare bone version of the latest release, and I can't get anything to show. I followed all three steps on the readme and produced the following code:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>

        <style type="text/css">

            @import url('css/nanoscroller.css');

            .nano .content      { padding: 10px; }
            .nano .pane         { background: #444; }
            .nano .pane .slider { background: #111; }
        </style>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.nanoscroller.min.js"></script>

        <script>
            $(document).ready(function(){
                $("#about.nano").nanoScroller();
            });

        </script>

    </head>
    <body>
        <div id="about" class="nano">
            <div class="content">
                <p>Hello </p>
                <p>Hello </p>
                <p>Hello </p>
                <p>Hello </p>
                <p>Hello </p>
                <p>Hello </p>
                <p>Hello </p>
                <p>Hello </p>
                <p>Hello </p>
                <p>Hello </p>
                <p>Hello </p>
                <p>Hello </p>
            </div> 
        </div>

    </body>
</html>

Any reason why the paragraphs won't be showing?

Declaring the name property on the nanoScroller object throws an error (name property is read-only) that will cause Firefox to fail. The error is in the compiled JS, removing the line solves the issue as the property is not used.

https://github.com/jamesflorentino/nanoScrollerJS/blob/master/bin/javascripts/jquery.nanoscroller.js#L42

Need to reverse the actions on mouse wheel. Currently up is down and down is up.

A callback that is fired when the scroll reaches the end of the content. Great for infinite scrolling :)

Probably easiest to link to a test page I've created: http://barben.dev-server.dnsalias.com/test.html

I get the error style undefined error and the slider has no height.

Great plugin. I wish it would easily integrate into existing frameworks and websites though. It does not work in a Kendo UI grid. Any ideas on how to get this fixed?

Here is a live example of it:
http://jsfiddle.net/x9yL5/

I am considering of implementing this in native JavaScript so it doesn't turn off potential contributors who dislike CoffeeScript.