aamirkhan921 / jquery-nicescroll Goto Github PK

This is a proposed enhancement... add arrow buttons on scrollbar.

Not really an issue but ...

Thanks a lot to share your great plugin !

Do you plan to share it in download section in another format than 7zip ?
Natively, neither Linux nor mac os support it

thanks again

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.

What steps will reproduce the problem?
1.Download the Firefox mobile browser app
2.Open a page using nicescroll
3.Trying to scroll the page with your finger does not work. Page just sits at 
the top and does nothing.

What is the expected output? What do you see instead?
Page should scroll with your finger

What version of the product are you using? On what operating system?
Version 3.2 on Firefox Mobile Browser

Please provide any additional information below.

With this initialization top and bottom parameters are ignored:

$('.scrollCustomized').niceScroll({
  railpadding: { top:3, right:0, left:0, bottom:3 }
});

I think that the proble is on line 639 of jquery.nicescroll.js 3.0 file.

The line is:
var v,a,kp = ["left","right"]; //"top","bottom"

After this edit:
var v,a,kp = ["left","right","top","bottom"];

all is working well.

What steps will reproduce the problem?
1. scroll down with mouse ( only by roll button - by keyboard is ok )

What is the expected output? What do you see instead?
at times the vertical scroll bar stop! I need to press F5 to return to normal 
and even then sometimes lock again.

What version of the product are you using? On what operating system?
Version 26.0.1410.64 m

Please provide any additional information below.
I tested and this problem does not happen in IE and not in Firefox. So it isn't 
an error in my code.

I made an example page to demonstrate the bug.

http://jsfiddle.net/T6xnZ/1/

1. NiceScroll on a DIV.
2. The DIV contents are twice the size of their parent's DIV.
3. NiceScroll.resize();
4. User scrolls to bottom.
5. DIV contents are replaced and are now half the size of the parent div.
6. NiceScroll.resize();
7. Scrollbar disappears as there's nothing to scroll.
8. DIV Contents go back to being twice the size of their parent's DIV.
9. NiceScroll.resize();
10. Scrollbar re-appears but mousewheel stops functioning. You can still scroll 
by clicking the scrollbar.
Extra. $('div').getNiceScroll()["0"].doScrollTo(0); can be used to fix the 
mousewheel.

Open following URL:
http://webstik.com/nicescroll/

Here you will see one div with enables nicescroll over it. On iPad the HTML5 
element input[type=range] can't be moved. How this can be fixed?

Thank you! 

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?
 - when open a dialog nice scroll element must lose it focus. but it keep focusing only to nice scroll

What version of the product are you using? On what operating system?
 - version 3.4.0
 - Windows 7 64 bit

Please provide any additional information below.
  - i'm just add some 100 of product div in nice scroll div.
  - on that each element i bind click event to open a detail popup
  - that popup element is append to body tag only not in nice scroll content
  - when open dialog scroll the mouse wheel the nice scroll content only srolled in background 
  - unable to click the dialog elements when i try to click the nice scroll content click only triggered. 
 -Please refer the attached video file

Hello,

Looks like in iOS (I use 5.1.1) any version of niceScroll 3.x disables anything 
else uses z-index property when executed! The script it self works fine. Rest 
of browsers/devises don't have this issue. This problem is not happening on 
niceScroll 2.9.6.

What steps will reproduce the problem?
1. Create a div with a list of fields one below the other, and attach the 
nicescroll to it such that we can see the scrolling behaviour.
2. Set focus on the first element using the mouse. Use tab to then move between 
each of the fields.
3. The nicescroll disappears.

What is the expected output? What do you see instead?
The nicescrollbar should still be visible, and should scroll as and when the 
div moves up/down .

What version of the product are you using? On what operating system?
2.8.2 on Windows Vista

Please provide any additional information below.

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.

line 3114 ：
for(a=0;a<doms.length;a++)
must change to
for(var a=0;a<doms.length;a++)


sorry I do something in this js, so the line number could be worng..and my 
English also is poor

What steps will reproduce the problem?
1. After the page load. I click a button to fill a EMPTY div[id="div1"] content 
with with html using jquery.
2. After filling  initialzing the niceScroll() for that div[id=div1]. the 
scroll do not show even though the html data is larger than the div height 
currently set. If i resize the browser the scroller shows
3.

What is the expected output? What do you see instead?
if i donot use the plugin but use the default browser scroller on div it works 
as exprected. If contain size increases in a div through jquery html injection. 
The scroller works. The plugin donot.

What version of the product are you using? On what operating system?
I am using http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js

Please provide any additional information below.

What steps will reproduce the problem?
1. Using an iPad test the following function:
myscroll.scrollend(function(){
  if (flow.scroll.x <= 0){
    alert('0');
  }
});


What is the expected output? What do you see instead?

Alert not fired until you scroll to the end of the document.
Desktop browsers fire at the end of any scroll movement.

What version of the product are you using? On what operating system?
jquery.nicescroll -- version 3.4.0
iPad 2 iOS 6.1.3

Please provide any additional information below.

What steps will reproduce the problem?

1. When opening or closing any JQuery UI dialog with animation using show 
and/or hide option with effect and duration properties, i.e. show {effect: 
"fadeIn", duration: 500} and/or hide {effect: "fadeOut", duration: 500} the 
vertical (do not tested with horizontal) scrollbar appears in wrong position. 
Only after using mouse wheel or keyboard navigation the scrollbar goes to the 
right position.

I am using nicescroll 300RC8 on Windows XP with Firefox 16.0.2, Chrome 
23.0.1271.64 or IE8 (same problem with all browsers).

Temporary soliution for me is to use getNiceScroll().hide() before closing the 
dialog, but didn't find any soliution for this problem when opening the dialog.

What steps will reproduce the problem?

1. Apply nice scroll to any div having scrollbar.
2. Hide this div on any action like click on any button.
3. The will be hide but scrollbar (nice scroll rails div) will be always 
visible.

What is the expected output? What do you see instead?

Scrollbar should be hide if its respected div (content div) hide.

We can hide this also by calling its hide() on any event.
and one more solution is available by apply this using

 DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content

but the problem, it is not possible with every condition, if there are multiple 
action available on screen and content added dynamically than we will have to 
hide rails div.

Please provide any additional information below.

This problem is persist because every rails div is appended in body so could it 
possible instead of appending its on body, appending it to its respected div so 
if we hide the div it will be automatically hide.


I am waiting for a solution, your most welcome

What steps will reproduce the problem?
I created a jsfiddle. With the problem. Essentially create a div area where 
when resized, it will grow or shrink based on the browser.

Note that this DOES work in 2.9.7 but not 3.0.0. The fiddles are identical 
aside from the path of the JS file it includes. 

http://jsfiddle.net/hikirsch/RB2ck/ - v3.0.0 R7 (linked from a personal server)
http://jsfiddle.net/hikirsch/CF9tf/ - v2.9.7 (linked directly to github)

What is the expected output? What do you see instead?
if you start by making the browser wider, you'll see it more easily that the 
scrollbar stays static. If you make the browser smaller in width, you'll start 
to sidescroll the entire browser window.

What version of the product are you using? On what operating system?
Both 3.0.0 and 2.9.7 (see fiddle). I'm testing this on Chrome OS X.

Please provide any additional information below.
I think that the resize method isn't setting the width inline on the element.

My attempts:

myScroll = $("#mydiv").niceScroll();

myScroll.scrollend(function(){
    if(myScroll.getScrollTop()+myScroll.cursorheight >= myScroll.getContentSize().h) {
        // do something
    }
});
When the scroll at bottom, the cursorheight I got can't satisfy the condition, 
it's smaller than what I expected.
Can anyone explain what the cursorheight is, and tell me how to konw the scroll 
reaches the bottom of a div?

This is the data of the three properties I got from attempts:
getScrollTop() - cursorheight - getContentSize().h
33 - 337 - 400
433 - 168 - 800
833 - 112 - 1200

I'm using jQuery.niceScroll version 3.0.0 and in a certain page I'm using 
jquery-accordion version 1.10.3.

However, the scroll doesn't seem to work on Chrome(Version 29.0.1547.57 m) and 
IE<9.

You can see the difference in the links given below as well as images attached.
http://sakraworldhospital.com/beta/about-us/
http://sakraworldhospital.com/beta/patients-visitors/visitor-information/

What steps will reproduce the problem?
1. load page that includes a call to niceScroll()
2. scroll function works fine
3. click a links that loads content into the scrollable area 
4. the scrollbar remains and moves up and down; however, the content that 
should be scrolling does not move

What is the expected output? What do you see instead?
the scrollbar remains and moves up and down; however, the content that should 
be scrolling does not move

What version of the product are you using? On what operating system?
2.9.6
windows7

Please provide any additional information below.
I've tried to use the getNiceScroll().resize(); method, but unless i'm doing it 
wrong, it hasn't changed anything.

What steps will reproduce the problem?
1. use a div with no content in it
2. keep adding content dynamically without refreshing the page


What is the expected output? What do you see instead?
It should have the scrollbar when the content goes beyond the div height. But 
it doesn't show the scrollbar

What version of the product are you using? On what operating system?
v290. Ubuntu 10.10

Please provide any additional information below.
I tried calling the plugin dynamically but that didn't work either.

Please add semicolons
Because when i use Dean Edwards (php) packer
http://dean.edwards.name/weblog/2006/12/packer-php/ code is broke.

A attache the fixed file just make diff and you will see added semicolons.

Best Regards,
Alexander Gavazov

What steps will reproduce the problem?
1. Place <a onclick="console.log('test')>Test</a> in one of the touch enabled 
examples.

What is the expected output? What do you see instead?
Links under the cursor should not be fired on mouse up when mouse up ends 
scrolling.

What version of the product are you using? On what operating system?
3.0.0 RC7

What steps will reproduce the problem?
1. If i put 3 jquery tabs and they have their own internal scrolling in each 
tab,then when i select new tab Nice scroll is not working.


What is the expected output? What do you see instead?
Expexted output to be scroll in each of the respected divs of Tabs.


What version of the product are you using? On what operating system?
I am using NiceScroll : 2.9.2 and Jquery 1.7.1


Please provide any additional information below.
To solve this issue, i made the scroll explicitly to be shown when a tab clicks.
For example : 
$("#tabsProduct").tabs
({
    select: function(event, ui)
    {
    $('#'+ui.panel.id).getNiceScroll().show();
    }
});

Is it possible to add a global flag to know when the scroller is scrolling? I 
need that to interrupt tap events in elements inside the scroll div. Otherwise 
I can not know if a tap is to stop the scrolling or for the item inside the div.

Thank you.

version 3.4.0



Setting bouncescroll to false does not prevent momentum scrolling from 
overshooting the top of the scroll div and over shooting the bottom of the 
scroll div on the ipad / ipad mini. (If this is the expected behavior, what 
option can I use to disable it?)

When a user on the ipad scrolls w/ momentum to the top of the scroll div the 
top value is less than zero exposing the wrapper div (in example, shows 
background color black), then snaps back to 0. When a user on the ipad scrolls 
w/ momentum to the bottom of the scroll div its top value exceeds its height, 
again exposing the wrapper div, then snapping back to its height.

ie: http://project-demo.us/

NOTE: setting hwacceleration to false fixes the issue but would prefer to keep 
hwacceleration as true

In the Example iframe3.html 
There get Error
jquery.nicescroll.js, line 2016 cha 11
SCRIPT5007: xxx is null xxxx "call" 

What steps will reproduce the problem?
1. Use Rails 4 with Turbolinks
2. Use $("html").niceScroll() in $(document).ready 
3. Use $("html").niceScroll() in $(document).bind "page:load"

What is the expected output? What do you see instead?
Expected: Scrollbar should work with the page:load event.
Actual: No scrollbar visible, <div> is not being created.

What version of the product are you using? On what operating system?
Rails 4.0.0.rc1 with Turbolinks, Windows 7 x64

Please provide any additional information below.
Turbolinks is a new gem that essentially loads all links in the background via 
ajax and then replaces the <body> (and <head> content) element. Somehow the 
second call of niceScroll() on the same document doesn't work, although the 
body content (and with it the scrollbar) has been replaced.

What steps will reproduce the problem?
1. Have a "div" with switchClass 
example:http://maps.google.com.ec/maps?q=google+maps&oe=utf-8&rls=org.mozilla:es
-ES:official&client=firefox-a&um=1&ie=UTF-8&hl=es&sa=N&tab=wl
2. Aply nicescroll to the div
3. Ejecute the switchClass control

What is the expected output? What do you see instead?
The nicescroll is static in the original position. The nicescroll must desplace 
with the div.

What version of the product are you using? On what operating system?
v 2.8.2, windows7, chrome17

On the 2.9.2 version I see this
on line 365 pos.top+=2;
I have to erase that line because it is unnecessary (and it's not looking good 
when render) that added offset.

Cheers!

Sebastian

P.S. Sorry about my poor english

What steps will reproduce the problem?
1. the iframe demo doesn't work 

I use the nicescroll release 3.1.9

I want that the horizzontal scrollbar is set to true ( i want to see only 
horizzontal scrollbar)

And i want that the vertical scrollbar is set to false ( i never want to see 
the vertical scrollbar)

can you help me!

how can i do to hide the vertical scrollbar using the nicescroll release 3.1.9?

Thanks

currently when we move mouse inside the div scroll bars just appears and then 
hide. Is there a way to show the scroll bar whenever the mouse is inside the 
div. But need to hide the scroll bar when mouse move outside the
div.
Can you please help me on this.

Nicescroll is assigned to div. When I open modal dialog scroll bar for div 
still appears. See the image attached.

What steps will reproduce the problem?
1. Use win8
2. Use IE10 in touch mode (metro and desktop)
3. Scroll doesn't work ....

What version of the product are you using? On what operating system?
Current version on Samsung Slate (Serie 7)

here is a bug:
HTML
<div id="parent">
  <div id="sonOne"></div>
  <div id="sonTwo"></div>
</div>

script:

dom ready:

$("#parent, #sonOne, #sonTwo").niceScroll()

------------------------------Problum is --------------
when the parent has niceScroll,
 ths son's niceScroll 's position will wrong。

the option only right left position。
bug, if i wanna the  position is  "left: xxx - val "
just like:

the line 601

if ( self.opt.marLeft ) {
  var pos = {top:wpos.top,left: wpos.left - self.opt.marLeft };
} else {
  var pos = {top:wpos.top,left:wpos.left};
}

and add option:

  var _globaloptions = {
         xxxxx,
         xxxxxx,
         ....
      marLeft:"",
  }

What steps will reproduce the problem?

1.page needed with iframe without scroll
2. While scrolling over the iframe content area, the nice scroll(page scroll) 
doesn't work


What is the expected output? What do you see instead?

 While scrolling over the iframe content area, the page scroll need to work. It is working in chrome.

What version of the product are you using? On what operating system?

Firefox 17.0.1


Please provide any additional information below.

What steps will reproduce the problem?
1.The scroll is perfectly display when the page is load
2.The scroll disappear and don't work no more
3.if i resize the window it 'll appear but don't work.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?
NiceScroll version: 2.9.6 Windows7 64 bit

Please provide any additional information below.
in the other browser the javascript works fine!
In my version there's only:
<div id="ascrail2001" style="width: 5px; z-index: 9002; position: absolute; 
top: 30px; left: 385px; height: 300px; opacity: 0; "><div style="position: 
relative; top: 0px; float: right; width: 5px; height: 44px; background-color: 
rgb(0, 0, 255); background-clip: padding-box; border-top-left-radius: 5px; 
border-top-right-radius: 5px; border-bottom-right-radius: 5px; 
border-bottom-left-radius: 5px; "></div></div>

but not <div id="ascrail2000" 

If the CSS property "overflow-x:hidden" is added to the <body> tag: 

Firefox:
The normal vertical scrollbar appears in addition to the nicescroll vertical 
scrollbar and scrolling the nicescroll scrollbars has no effect.

IE10:
The normal vertical scrollbar appears and no nicescroll scrollbar appears.


I use jQuery 1.10.2 and nicescroll 3.4.0


(what I try to do is disabling horizontal scrolling at all, NO horizontal 
scroll bar! I realized that horizrailenabled:false brings up the default 
vertical scrollbar so I tried it with style="overflow-x:hidden"...)

What steps will reproduce the problem?
1. I went to http://areaaperta.com/nicescroll/
2. Opened in my Surface RT, with IE10 App
3. I tried to scroll with the finger... just don't work. The page dont move.

What is the expected output? What do you see instead?
That the page scrolls. The page is not scrolling


What version of the product are you using? On what operating system?
Internet Explorer 10 App - Windows 8 RT (with lastest updates)


Please provide any additional information below.

-

What steps will reproduce the problem?
1.set html to use nicescroll
2.set an inner item to use nicescroll
3.the new item is set to position:fixed(css),

What is the expected output? What do you see instead?
i expected the new item's scroll to stick with it, but the new item's scroll 
moved up as i scrolled the page down, the new item iteself sticked to its 
position cuz its css position is fixed.

What version of the product are you using? On what operating system?
2.9.6, and the new rc

Please provide any additional information below.
i fixed the issue but replacing every 'absolute' css in the js file to 'fixed', 
but with this, i have a new problem if the html or the parent element doesn't 
have a nicescroll, if the new item has nicescroll and the parent doesnt, then 
if i scroll down the parent, the new item will move if it's not fixed, and the 
scroll will stick to its position cuz its fixed already.
the plugin has to detect if the parent item has a nicescroll, or is it fixed or 
not...etc, before deciding whether to move the nicescroll or make it fixed.

What steps will reproduce the problem?
1. Page Slide jquery.
2.
3.

What is the expected output? What do you see instead?
The scrollbar  not come as per expected. It shifts far.

What version of the product are you using? On what operating system?
window xp.

Please provide any additional information below.

I stumbled on this project and I like it alot. This isn't really an issue as 
much as a few nice to haves

- horizontal scrollbar version
- scroll to coordinates in container
- scroll to Dom element in container

Awesome work

What steps will reproduce the problem?
1. http://jsfiddle.net/t9CLH/4/
2. Click on the input box to change the field's text
3. Nothing Happens

What is the expected output? What do you see instead?
You should see a blinking cursor and be able to type in the text field. 
Instead, nothing happens.


What version of the product are you using? On what operating system?
Windows 7, Firefox, NS 2.9.2


Please provide any additional information below.
--

What steps will reproduce the problem?
1. Try to add scroll for the iframe content.
2. Load the content of different domain.

What is the expected output? What do you see instead?
I expected the iframe to scroll, but it doesn't scroll.

What version of the product are you using? On what operating system?
NiceScroll version:  3.4.0
iOS versions 5,6,7;

Please provide any additional information below.
I have added the NiceScroll to solve the iframe scrolling issue in the iOS 
devices but doesn't work for the content of different domain, even i have set 
some height manually to the iframe but it fail to work.

It would be awesome if we could use this even to scroll under windows.
something like this: http://www.marcmoini.com/sx_en.html
already possible?

What steps will reproduce the problem?

1. Apply nice scroll to any div having scrollbar.
2. Hide this div on any action like click on any button.
3. The will be hide but scrollbar (nice scroll rails div) will be always 
visible.

What is the expected output? What do you see instead?

Scrollbar should be hide if its respected div hide.

We can hide this also by calling its hide() on any event.
and one more solution is available by apply this using

 DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content

but the problem, it is not possible with every condition, if there are multiple 
action available on screen and content added dynamically than we will have to 
hide rails div.

Please provide any additional information below.

This problem is persist because every rails div is appended in body so could it 
possible instead of appending its on body, appending it to its respected div so 
if we hide the div it will be automatically hide.


I am waiting for a solution, your most welcome

What steps will reproduce the problem?
1. set smoothscroll:false when constructing your nicescroll instance:
$(document).ready(
    function() {
        nice = $("#scroll").niceScroll("#wrapperdiv",{
            cursorcolor:"#51FFC9",
            cursoropacitymin:"0.5",
            cursorborderradius: "0",
            bouncescroll:false,
            scrollspeed:"100",
            cursorfixedheight: "150",
            smoothscroll:false,
            });
    }
);


What is the expected output? What do you see instead?
-expected: scrolling should loose it's "inertia" and stop when mouse wheel 
stops along with the cursor.
-instead: scrolling lost its inertia but the cursor doesnt move at all.

What version of the product are you using? On what operating system?
jquery.nicescroll version 3.2.0

Please provide any additional information below.
i've seen this happen on pc with chrome 26, IE9 and firefox 19.0.2
and on mac with chrome 26 and safari 5.1.7.

click and drag the cursor still works.