kingsora / overlayscrollbars Goto Github PK

OverlayScrollbar works as expected until you use the mouse to drag the scrollbar, after which it starts jumping on each mouse move.

Version: 1.4.1 (1.4.4 does not work with AMD)
Options:

 {
          scrollbars: {
                autoHide: 'leave',
                autoHideDelay: 300
          }
}

Browser: Chrome, Firefox

I use the Plain Javascript version. Here is a demo of the problem:

Hi there:

I found a new issue when using the OverlayScrollbars on a Materialize dropdown-menu element.

I have this part of the code on my Initialization method (I use jquery)

$(document).ready(function(){
    $('.dropdown-menu').overlayScrollbars({ 
       className: "os-theme-dark",
        scrollbars : {
        visibility  : "auto",
        autoHide  : "move",
        touchSupport  : true
      },
    }); 

Then I construct my dropdown-menu dynamically and here are some CSS snippets from the materialize.css file

.open>.dropdown-menu {
	display: block;
}
.open>a {
	outline: 0;
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: 30px 0;
	margin: 2px 0 0;
	text-align: left;
	list-style: none;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	box-shadow: 0 6px 12px rgba(0,0,0,.175);

	li > a {
		display: block;
		padding: 5px 40px;
		clear: both;
		font-weight: 400;
		line-height: 1.42857143;
		color: #333;
		white-space: nowrap;

		&:hover {
			background-color: #0064b3;
			color: #fff;
			text-decoration: none;
		}
	}
}

.dropdown .dropdown-menu li > a {
  &:hover {
    color: #FFBA20;
  }
}

So here it is how my dropdown menu element looks like without OverlaysScrollbar on Mac OS X

So here it is how my dropdown menu element looks like without OverlaysScrollbar on Windows (look at the scrolling bar)

And this is how my dropdown menu element looks like when using OverlaysScrollbar. It gets all messed up.

@KingSora, my question is: How can I fix this behavior to respect the CSS styling on my materialize CSS class?

Hello @KingSora, and thanks for your work!
I run a size-limit --why, because I found that my bundle size was heavy,

As you could see, OverlayScrollbars is one of the two heaviest libraries in my bundle, next to vuejs..!
vue.js : 278kb normal, 102kb minified
OverlayScrollbars.js : 294kb normal, 53kb minified

Any plans to reduce that size?

Thanks,

If you try to initialize a scrollbar on an empty element, it gives this error:

TypeError: Argument 1 of Node.appendChild does not implement interface Node.
overlayscrollbars.js:1142:25

I can reproduce this with e.g.

<div id="test"></div>

OverlayScrollbars(document.getElementById("test"), { });

Sometimes I may wish to do this if I haven't filled that div with content yet, e.g. a dynamically loaded list. For now I have deferred initializing the scrollbar until after the first time the container has at least one thing in it, but would be nice to not have to do that.

I try to use version without jQuery but it still wants jQuery,

Library (and documentation) looks really great!

I would like an extra option for autoHide / show. If you have it on 'scroll' for example, I would like to also be able to see the scrollbar when I move my mouse on the page, and also hide it after X miliseconds.

P.s. I made an issue on cdnjs to get it 'hosted' over there:
cdnjs/cdnjs#12562

Is it possible to use this plugin with a table?
I try to have a scroll-able tbody with a fix height, while the behaves as a sticky header.

https://jsfiddle.net/Lnrk66e2/4/

Hello,
To avoid bad description there is a gif to explain the problem.

https://gfycat.com/ReasonableSandyAfricanwildcat

This is like this on all pages of my app so i don't think is a bad comportent with the other js.

thank for advance

Hi,
I got this error when use scroll method, OverlayScrollbars without jQuery.

var possibleElementIsJQuery = possibleElement instanceof helper || possibleElement instanceof window.jQuery;

OverlayScrollbars.js:5102 Uncaught TypeError: Right-hand side of 'instanceof' is not an object
at window.(anonymous function).OverlayScrollbarsInstance._base.scroll (webpack:///./node_modules/overlayscrollbars/js/OverlayScrollbars.js?:5102:104)

After creating OverlayScrollbars with autoHide = 'leave' and the mouse overhead the container, scrollbars not visible.
The scrollbars only visible when we move the mouse out/in the container.

Click refresh then move mouse over yellow box.
https://jsfiddle.net/wxaeqcn2/2/

I'm developing a product with a feed/wall of posts and i'm loading the images with lazy loading.
The scroll bar is getting "crazy" every time an image is loaded, it goes up and down and sometimes i can't reach the end of the feed or in some cases i have a gap between the end of the bar to the actual end of the feed.

What is the problem and what can i do?

Try to make a simple feed with lazyload images async and you will see.

Works fine when I use $('body').overlayScrollbars({ }); or $('div').overlayScrollbars({ });

but nothing happens when i do this $('#some_div_id').overlayScrollbars({ }); or this $('.some_div_class').overlayScrollbars({ });

I'm getting the following error when trying to use any kind of scroll command:
instance.scroll(100);

Uncaught TypeError: Cannot create property 'guid' on number '100'
at Object.add (jquery.min.js:2)
at HTMLBodyElement. (jquery.min.js:2)
at Function.each (jquery.min.js:2)
at w.fn.init.each (jquery.min.js:2)
at De (jquery.min.js:2)
at w.fn.init.on (jquery.min.js:2)
at w.fn.init.w.fn.(anonymous function) [as scroll] (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:85766)
at :1:11

Any help is appreciated :)

Thanks,
Ben

Hi. I'm trying add scrollbar to selectize dropdown but get error:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
selectize - library for custom select: https://github.com/selectize/selectize.js

I like the way you support us, and how you're fixing the bugs, but it is annoying how new versions are released. For example, version 1.4.3 to 1.4.4, jQuery Release... What changed? Nothing, but new version was released. That confusing a lot... May be you should separate this versions, also jquery one and vanilla?

I created one for my own purposes, which may be useful to you:

type ResizeBehavior = "none" | "both" | "horizontal" | "vertical" | "n" | "b" | "h"|  "v";

type OverflowBehavior = "hidden" | "scroll" | "visible-hidden" | "visible-scroll" |  "h" | "s" | "v-h" | "v-s";

type VisibilityBehavior = "visible" | "hidden" | "auto" | "v" | "h" | "a";

type AutoHideBehavior = "never" | "scroll" | "leave" | "move" | "n" | "s" | "l" | "m";

type EventCallback = function (this: OverlayScrollbars): void;

interface OverlayScrollbarsOptions {
	className?            : string | null,
	resize?               : ResizeBehavior,
	sizeAutoCapable?      : boolean,
	clipAlways?           : boolean,
	normalizeRTL?         : boolean,
	paddingAbsolute?      : boolean,
	autoUpdate?           : boolean | null,
	autoUpdateInterval?   : number,
	nativeScrollbarsOverlaid? : {
		showNativeScrollbars?  : boolean,
		initialize?            : boolean
	},
	overflowBehavior? : {
		x? : OverflowBehavior,
		y? : OverflowBehavior
	},
	scrollbars? : {
		visibility?       : VisibilityBehavior,
		autoHide?         : AutoHideBehavior,
		autoHideDelay?    : number,
		dragScrolling?    : boolean,
		clickScrolling?   : boolean,
		touchSupport?     : boolean
	},
	textarea? : {
		dynWidth?  : boolean,
		dynHeight? : boolean
	},
	callbacks? : {
		onInitialized?               : EventCallback | null,
		onInitializationWithdrawn?   : EventCallback | null,
		onDestroyed?                 : EventCallback | null,
		onScrollStart?               : EventCallback | null,
		onScroll?                    : EventCallback | null,
		onScrollStop?                : EventCallback | null,
		onOverflowChanged?           : EventCallback | null,
		onOverflowAmountChanged?     : EventCallback | null,
		onDirectionChanged?          : EventCallback | null,
		onContentSizeChanged?        : EventCallback | null,
		onHostSizeChanged?           : EventCallback | null,
		onUpdated?                   : EventCallback | null
	}
}

interface ScrollInfo {
	x : {
		position          : number,
		ratio             : number,
		max               : number,
		handleOffset      : number,
		handleLength      : number,
		handleLengthRatio : number,
		trackLength       : number,
		isRTL             : boolean
		isRTLNormalized   : boolean
	},
	y : {
		position          : number,
		ratio             : number,
		max               : number,
		handleOffset      : number,
		handleLength      : number,
		handleLengthRatio : number,
		trackLength       : number
	}
}

interface Elements {
	target   : HTMLElement,
	host     : HTMLElement,
	padding  : HTMLElement,
	viewport : HTMLElement,
	content  : HTMLElement,
	scrollbarHorizontal : {
		scrollbar : HTMLElement,
		track     : HTMLElement,
		handle    : HTMLElement
	},
	scrollbarVertical : {
		scrollbar : HTMLElement,
		track     : HTMLElement,
		handle    : HTMLElement
	},
	scrollbarCorner : HTMLElement
}

interface State {
	sleeping      : boolean,
	autoUpdate    : boolean,
	widthAuto     : boolean,
	heightAuto    : boolean,
	documentMixed : boolean,
	padding : {
		t : number,
		r : number,
		b : number,
		l : number
	},
	overflowAmount : {
		x : number,
		y : number
	},
	hideOverflow : {
		x  : boolean,
		y  : boolean,
		xs : boolean,
		ys : boolean
	},
	hasOverflow : {
		x : boolean,
		y : boolean
	},
	contentScrollSize : {
		width  : number,
		height : number
	},
	viewportSize : {
		width  : number,
		height : number
	},
	hostSize : {
		width  : number,
		height : number
	}
}

type Position = number | string;

type Coordinates =
  { x: Position, y: Position } |
  { l: Position, t: Position } |
  { left: Position, top: Position } |
  [Position, Position] |
  Position |
  HTMLElement |
  {
    el       : HTMLElement ,
    axis     : string,
    block    : string | ReadonlyArray<string>,
    margin   : number | ReadonlyArray<number> | boolean
  };

interface OverlayScrollbars {
  options(): OverlayScrollbarsOptions;
  options<T = {} | undefined | null>(optionName: string): T;
  options(optionName: string, optionValue: any);
  options(options: OverlayScrollbarsOptions);

  update(force?: boolean);
  sleep();
  scroll(): ScrollInfo;
  scroll(coordinates: Coordinates, duration?: number, easing?: string | ReadonlyArray<string>, complete?: Function);
  scroll(coordinates: Coordinates, options?: object);
  scrollStop();
  getElements(): Elements;
  getState(): State;
  getState<T = {} | undefined | null>(stateProperty): T;
  destroy();
}


declare interface OverlayScrollbarsStatic {
  (element: HTMLElement, options: OverlayScrollbarsOptions): OverlayScrollbars;
  (element: HTMLElement): OverlayScrollbars | undefined;

  (elements:  NodeListOf<Element> | ReadonlyArray<Element>, options: OverlayScrollbarsOptions): Array<OverlayScrollbars>;
  (elements: NodeListOf<Element> | ReadonlyArray<Element>): Array<OverlayScrollbars>;

  globals(): {
    defaultOptions          : {},
    autoUpdateLoop          : boolean,
    autoUpdateRecommended   : boolean,
    supportMutationObserver : boolean,
    supportResizeObserver   : boolean,
    supportPassiveEvents    : boolean,
    supportTransform        : boolean,
    supportTransition       : boolean,
    restrictedMeasuring     : boolean,
    nativeScrollbarStyling  : boolean,
    cssCalc                 : string,
    nativeScrollbarSize : {
      x : number,
      y : number
    },
    nativeScrollbarIsOverlaid : {
      x : boolean,
      y : boolean
    },
    overlayScrollbarDummySize : {
      x : number,
      y : number
    },
    rtlScrollBehavior : {
      i : boolean,
      n : boolean
    }
  };

  defaultOptions(): OverlayScrollbarsOptions;

  defaultOptions(newDefaultOptions: OverlayScrollbarsOptions): OverlayScrollbarsOptions;
}


declare module "overlayscrollbars" {
  var x: OverlayScrollbarsStatic;
  export = x;
}

Hi, thank you for your awesome plugin. I like it but there is a small bug whois is the bootstrap modal is not working properly after installing your plugin. When I click the modal button it's open but never close and on the top of the modal, there is a black mask. Hope I will get a solution soon.

Thank you

This is a great library - much better than the other's I have seen.

Any possibility of supporting a module architecture (ES6 for example)?

import OverlayScrollbars from 'overlayscrollbars';

let scrollbar = OverlayScrollbars(ref, options);

Would be very useful integrating the plugin with a package manager like NPM or Webpack.

I can't seem to get the scroll position of the element.
I've tried it like this:
pageContentScroll);`

Maybe I'm overlooking something or misunderstanding your documentation, but it's not working for me. Could you please help me get this right?

I have a case that works fine in Firefox, but not in Chrome. Below I have tried to make a little sample of the case -- the real case it is taken from is a fixed-position navigation tree on the left side of a page. Clicking on a node in the tree expands children. When the tree gets too tall, a scrollbar should appear. This works fine in Firefox but not in Chrome.

Example HTML:

<div style="display:flex;flex-flow:column nowrap;width:200px;position:fixed;z-index:1;top:300px;left:0;background:darkred;color:white;height:calc(100vh - 300px);">
    <div style="flex-shrink:0;padding:20px;">
        Some Stuff
    </div>
    <div id="testScroll" style="flex-grow:1;margin:10px 0 30px 0;border-top:1px solid white;border-bottom:1px solid white;">
        <div id="dynamicContent">
            <div>FIRST THING</div>
            <div>A thing</div>
            <div id="interestingThing">Click this thing</div>
            <div id="extraStuff" style="display:none;">
                <div style="height:700px">Another Tall Thing</div>
            </div>
            <div style="height:500px;">A Tall Thing</div>
            <div>LAST THING</div>
        </div>
    </div>
</div>

Example js:

const scrollbar = OverlayScrollbars(document.getElementById("testScroll"), { className: "os-theme-light" });

document.getElementById("interestingThing").addEventListener("click", e => {
    let stuff = document.getElementById("extraStuff");
    if (getComputedStyle(stuff).display === "block")
        stuff.style.display = "none";
    else
        stuff.style.display = "block";
});

I have reproduced some of the styles from my real example in case it's something specific causing the issue. To see the issue, make your browser window tall enough that you can see "LAST THING" without needing a scrollbar. Then click on "Click this thing" to show "Another Tall Thing". A scrollbar should appear so you can scroll down to see "LAST THING". This works in FF as expected, but not in Chrome.

Any help would be appreciated -- so far I'm really liking this scrollbar script.

I have a fixed footer that is hidden behind content wrapper and gets revealed when the scroll hits the bottom of the page. OverlayScrollbars is working nice in general, but mousewheel up over this fixed footer does not trigger scroll change.

This can also be tested on the demo page, mouse-scrolling over the fixed header does not move the content scroll, while native scroll would do so.

Note. Not sure this is rather a feature request than an issue, please tell me if I am misaddressing.

hello,

scroll bar (in my case horizontal, i didnt check vertical) didnt show/appearing... only after window resize or in my case-when i activate next tab where i other img gallery) ... for test i using your css and css theme... problem come up when site is uploaded on server (or test locallhost) but when i using a brackets live view every thing is ok... on classic firefox and chrome there is no problem also (everywhere)

in console i get massage: "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!"

OverlayScrollbars.defaultOptions({...}) and $.fn.overlayScrollbars().defaultOptions({...}) throws an error, meaning you can't access defaultOptions() method.

Found a workaround though... But I'm not sure this is intended behavior.

$.fn.overlayScrollbars();
OverlayScrollbars.defaultOptions({...})

after calling $.fn.overlayScrollbars() everything works... Weird...

How to get scrollTop , scrollLeft?

Hello,

1. It is possible to scroll on track with one click (tap on mobile) where cursor is?
   It will make the scrollbar more useful to scroll to a specific position in the page without pulling the scrollbar, the current behavior is bad and is not precise. Saw here
2. It is possible to set a page transition speed value while scrolling after click? Similar here
   Will be nice instead of direct jump.

Something like this:

Hello!
I found this bug on all my projects. You can see it on your demo page too - http://take.ms/WhYhS
00:00 - 00:05 everything is fine
00:05 - 00:09 I've dragged the scrollbar outside the box
00:10 - 00:26 the scrollbar has become crazy

I've noticed small thing, that following div "os-scrollbar-corner" is added on all elements like span, div, etc. What is the point of this one, when corner is probably only needed on textarea fields?

I wonder which version is faster? Any measurements possible?

I'm trying to get sroll working on element with css property flex: none;. See following demos:
That is where box is collapsed: https://sieler.im/scroll/test1.html
But, i wonder why? Height isn't calculated properly?

We use the OverlayScrollbars on a body element which works great.

The only problem is when the user scrolls down the page and reloads the page the scrollbar always gets initialized to top most position. That means with other words, he does not get back to the former position on the page.

The standard scrollbar seems to consider that. We initialize OverlayScrollbars in the document.ready() function. Do we oversee something? Or is it not possible to "remember" the position of the scrollbar?

Many thanks for a feedback.

I have a layout that requires the scrollbar to be positioned on the outside of the scrollable content. If I add right: -4.24vw; or transform: translateX(4.24vw); the overflow: hidden !important class on the .os-host-overflow element cuts off the scrollbar. I manually overwrote this CSS style and it looks ok in chrome 64 (Mac OSX), but I haven't tested in other browsers yet.

I found a link to this library on reddit and decided to give it a try. So far it handles scrolling noticeably better than the malihu custom scrollbar plugin. The malihu plugin would occasionally lurch the scroll position while scrolling.

Hi.
I used your OverlayScrollbars jquery plugin to show customized scrollbar.
I want to scroll top or bottom window automatically when user click a button.
So I tired this.

var instance;
        $(function() {
            //The passed argument has to be at least a empty object or a object with your desired options
            instance = $('body').overlayScrollbars({
                callbacks: {
                    onScroll: function(eventArgs) { 
                        var scroll = eventArgs.srcElement.scrollTop;
                        if (scroll >= 1) {
                            $(".boxfit-navbar").addClass("fixed");
                        } else {
                            $(".boxfit-navbar").removeClass("fixed");
                        }                    
                    }
                }
             });

             $('#down-to-bottom-button').click(function() {
                 instance.scroll(0, 250);
             });

But it doesn't work.
What can I do now?

Hi:

I'm creating a new site using Materialize.css and there is one function I'm using, .sideNav(), (https://materializecss.com/sidenav.html) which allows creating a slideout menu. The issue here is when I include the OverlaysScrollbars css and js files on my code, I'm not able to access the elements inside of the menu for some reason. The result of including Overlays code is an sidenav-overlay class that covers all the screen and I can't click on each element on the menu.

Here is a small snippet of my code along with Overlays Scrollbars initialization.

$(document).ready(function(){
$('.button-collapse').sideNav();
$('.parallax').parallax();
$('.collapsible').collapsible();
// NOTE: m_slider = materialize slider, we rename it because it conflicted with jquery UI slider
$('.slider').m_slider();
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false,
hover: false,
gutter: 0,
belowOrigin: true,
alignment: 'left',
closeOnClick: true
}
);
$('.settings-nav-btn').sideNav({
menuWidth: 300,
edge: 'right',
closeOnClick: true,
draggable: true,
});
$('body').overlayScrollbars({
className: "os-theme-dark",
scrollbars : {
visibility : "auto",
autoHide : "move",
touchSupport : true
},
});
});

I couldn't reproduce this plug on a simple examples
When using complicated VUE app I get a lot of "TypeError: Permission denied" on line 909
if (el.addEventListener) {
And the OverlayScrollbars won't replace the element's scrollbars.

When I wrap this with Try & Catch the error is gone and OverlayScrollbars is working.
try {el.addEventListener if (el.addEventListener) { for (i = 0; i < eventName.length; i++) el.addEventListener(eventName[i], handler); } else if(el.detachEvent) { for (i = 0; i < eventName.length; i++) el.attachEvent('on' + eventName[i], handler); } } catch (e) { // console.log(e); }

Will this one work well on dynamic filled content?
Let's say on small chatbox on top of jquery?

Can you please provide textarea demo sources(html, css, js)?
https://kingsora.github.io/OverlayScrollbars/#!demos/textarea

Why in my simple test empty textarea have hight bigger than .os-host? How I can solve this problem?
https://codepen.io/hxss/pen/gzqEPg

This is sort of a roadmap for version 1.4.5 and beyond:

Code imporvements:

• vanilla version fix helper init bug where a empty array is returned as first element (line 530)
• all versions fix a bug where async methods are executed even if the instance is destroyed
• all versions in InternetExplorer sometimes the plugin won't initialize in a iFrame
• all versions extended iFrame support: for example the method getState() will provide information whether the instance is in a iframe.
• all versions refresh viewportSize after "correct measuring" in update method.

General enhancements:

• make a benchmark between vanilla and jQuery version
• make a benchmark / feature comparison between OverlayScrollbars and similar plugins
• extend the documentation page with a article about how to use OverlayScrollbars in a flexbox layout
• extend the demo page with a iFrame demo

Features:

• implement a extension system to make it possible to implement own / specific features more easy (v1.5.0)
• find a way to use this plugin more easy with tables without third party plugins (via extensions maybe?)

If you have any suggestions or ideas, feel free to post them!

Is it possible to put the scroll bars on the outside of the container? Quite often I require the scroll content to be laid out exactly as is but nicely scrollable, but with OverlayScrollbars, it often places the scrollbar over the content.

I have a suggestion of adding how plugin structure will be added. I will provide small example, so you can better understand what i mean.

Let's assume following HTML structure is given:

<div id="chat">
  <div id="messages">
    ... list of messages ...
  </div>
  <div id="input">
    ... input field ...
  </div>
</div>

We want to make our messages scrollable and input element should be static/not scrollable. We do:
var messages= $('#messages').overlayScrollbars({ }).overlayScrollbars();

Seems good so far, but, our element #messages is replaced with container of overlayScrollbar, and now we can not fill/add our chat messages to #messages, beucase it is broken now. The only possibility in this case is to add some middleware container which will make it scrollable, for example like this:

<div id="chat">
  <div id="scroll">
    <div id="messages">
      ... list of messages ...
    </div>
  </div>
  <div id="input">
    ... input field ...
  </div>
</div>

With such initialization:
var messages= $('#scroll').overlayScrollbars({ }).overlayScrollbars();

In this case we will be able to add all our messages directly to #messages.

My suggestion is actually not to replace the selected element with overlayScrollbars containers, but by wrapping around it, so we will not have to add some other containers to make it work.

Hope you understand what i mean :)

Currently the main field in package.json points to js/OverlayScrollbars.min.js. I think it will be better if it points to js/OverlayScrollbars.js. it will have the following benefits:

• During dev, one needs an unminified view of the libs, so that one may debug deeper.
• Most apps, will have their own minification/packaging. Unminified code plugs in better with that
  workflow, including better compression ratios.

Hi,
Is there any plan to support easing?
Thanks!

edit:
I found it :-)
https://kingsora.github.io/OverlayScrollbars/#!demos/scroll

Is it possible to change height of scrollbar handle?

Hi, and congrats for your work,

I have a warning when i try to use the onScroll callback : here's what i can read in firefox console :

The following options are discarded due to invalidity: { "onScroll": "function" } (OverlayScrollbars.min.js:14:31423)

I really nead to listen to this callback, please help.

Fred, Brittany - France

I just tried to implement this script in my existing structure.

There's a div container, that is dynamically being filled with contents. It has a max-height of 500px:

<div class="container">
	<div class="innerDivA" style="display: block;">
		<!-- foo -->
	</div>
		
	<div class="innerDivB" style="display: block;">
		<!-- foo -->
	</div>
</div>

As soon as i execute your script on the container div, it becomes this:

<div class="container os-host os-theme-dark os-host-resize-disabled os-host-scrollbar-horizontal-hidden os-host-scrollbar-vertical-hidden os-host-transition">
	<div class="os-resize-observer-host">
		<div class="os-resize-observer observed" style="left: 0px; right: auto;">
		</div>
	</div>
	<div class="os-size-auto-observer" style="height: calc(100% + 1px); float: left;">
		<div class="os-resize-observer observed">
		</div>
	</div>
	<div class="os-content-glue" style="width: 252px; margin: 0px -5px 0px 0px; height: 501px;">
	</div>
	<div class="os-padding">
		<div class="os-viewport" style="right: 0px; bottom: 0px;">
			<div class="os-content-arrange">
			</div>
			<div class="os-content" style="padding: 0px 5px 0px 0px; height: auto; width: 100%;">
				<div class="innerDivA" style="display: block;">
					<!-- foo -->
				</div>
				<div class="innerDivB" style="display: block;">
					<!-- foo -->
				</div>
			</div>
		</div>
	</div>
	<div class="os-scrollbar os-scrollbar-horizontal os-scrollbar-unusable">
		<div class="os-scrollbar-track os-scrollbar-track-off">
			<div class="os-scrollbar-handle" style="width: 100%; transform: translate(0px, 0px);">
			</div>
		</div>
	</div>
	<div class="os-scrollbar os-scrollbar-vertical os-scrollbar-unusable">
		<div class="os-scrollbar-track os-scrollbar-track-off">
			<div class="os-scrollbar-handle" style="height: 100%; transform: translate(0px, 0px);">
			</div>
		</div>
	</div>
	<div class="os-scrollbar-corner">
	</div>
</div>

This results in an empty container directly before the element with a height of 501px (or whatever is being calculated). The scrollbar remains the system default one and i have two scrollbars now (the one from the element itself due to overflow-y: auto; and another one, that belongs to your plugin):

I just checked your recent issues and found #4 where you also posted a demo (https://jsfiddle.net/rq4xq5jf/1/). There, it also seems not to work as it should and i guess, it's the same problem.

Hi @KingSora:

Found new bug on this implementation.. After adding the code you sent me, there was one element I couldn't see on the page after installing OverlayScrollbars. It is a floating element which is attached to the body after the construction of body.

Here is a screenshot of the Quick Notes window floating in the bottom right part of the site BEFORE adding OverlayScrollbars:

Now, there is a screenshot of the same floating window AFTER OverlayScrollbars:

Here is how I declared the Quick Notes div on my initial javascript OverlayScrollbars file. It doesn't show when the page loads the first time but the quick notes DIV is shown after clicking on the sideNav element:

var osBodyInstance = $('body').overlayScrollbars({ }).overlayScrollbars();
var quicknotesElms = $('body > #quick-notes-widget');
var osContentElmQN = $(osBodyInstance.getElements().content);
osContentElmQN.append(quicknotesElms);
$(".settings-nav-btn").sideNav({
  menuWidth: 300,
  edge: 'right',
  closeOnClick: true,
  draggable: true,
  onOpen: function() {
    var sidenavElms = $('body > .sidenav-overlay, body > #sidenav-overlay, body > .drag-target');
    var osContentElm = $(osBodyInstance.getElements().content);
    if (sidenavElms.length > 0 && osContentElm.length > 0) {
      osContentElm.append(sidenavElms);
      osContentElm.append(sidenavElmsQN);
    }
  }
});

And this is the JS that attaches the quick notes to the main body of the page.

updateQuickNoteCounter = (inc) ->
  countEl = $('#quick-notes-count')
  countEl.html(parseInt(countEl.html()) + inc) # update counter in header

$ ->
  $(document).on 'click', '.quick-notes-header', ->
    $(this).parent().toggleClass('expanded')

  $(document).bind 'quick-notes:create', (e, html) ->
    $('.quick-notes-body ul').prepend(html)
    $('.quick-notes-body textarea').val('').trigger('mouseover'); # reset form, trigger mouseover need to reset counter
    updateQuickNoteCounter(1)

  $(document).bind 'quick-notes:remove', (e, id) ->
    $('#' + id).remove()
    updateQuickNoteCounter(-1)

Any idea how Can I fix it to support this Floating element when the page loads the first time?

hi, i'm back
I'm sorry about that but when i load the facebook javascript SDK i get errors from OverlayScrollbar.js.

Uncaught DOMException: Blocked a frame with origin "http://www.cc-paimpol-goelo.com" from accessing a cross-origin frame. at http://www.cc-paimpol-goelo.com/maquettes_cyber/gp3a-2/wp-content/themes/gp3a/js/OverlayScrollbars.min.js:14:10504 at x.each (http://www.cc-paimpol-goelo.com/maquettes_cyber/gp3a-2/wp-content/themes/gp3a/js/OverlayScrollbars.min.js:14:8725) at v.each (http://www.cc-paimpol-goelo.com/maquettes_cyber/gp3a-2/wp-content/themes/gp3a/js/OverlayScrollbars.min.js:14:8853) at v.on (http://www.cc-paimpol-goelo.com/maquettes_cyber/gp3a-2/wp-content/themes/gp3a/js/OverlayScrollbars.min.js:14:10476) at http://www.cc-paimpol-goelo.com/maquettes_cyber/gp3a-2/wp-content/themes/gp3a/js/OverlayScrollbars.min.js:14:16359 at new c (http://www.cc-paimpol-goelo.com/maquettes_cyber/gp3a-2/wp-content/themes/gp3a/js/OverlayScrollbars.min.js:14:16828) at l (http://www.cc-paimpol-goelo.com/maquettes_cyber/gp3a-2/wp-content/themes/gp3a/js/OverlayScrollbars.min.js:14:13656) at e.(anonymous function) (http://www.cc-paimpol-goelo.com/maquettes_cyber/gp3a-2/wp-content/themes/gp3a/js/OverlayScrollbars.min.js:14:53145) at HTMLDocument.<anonymous> (http://www.cc-paimpol-goelo.com/maquettes_cyber/gp3a-2/wp-content/themes/gp3a/js/init-accueil.js:96:29) at l (https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js?ver=3.3.1:2:29375)

error in my script init-accueil at line 96 correspond to the creation of my scrollbar instance.

If i don't load facebook sdk all is alwright.

Last thing, error occurs in chrome, IE but not in Firefox (i don't remember if i add a security exception..)

Thx for help,

Fred, Brittany - France.

I'm having some trouble adding an OverlayScrollbar inside a sidebar I've been working on, here's a fiddle with the issue:

Example

Is there something I'm missing?

So, everything works great up until I have about 10 or more elements on page that are initialized by OverlayScrollbar instance.

I have sections across the site and when I get to about 10 or more the OverlayScrollbar slows down drawing of elements and the wait is about 10-20 seconds before elements shows up. It's like CPU gets overloaded until it executes and initializes all elements and then it starts working. Something is going on under the hood with a bunch of divs using the OverlayScrollbar.

This is how I initialize:

$('.overlayScroll').overlayScrollbars({ className : "os-theme-dark", resize : "none", sizeAutoCapable : true, paddingAbsolute : true, overflowBehavior: { x: "hidden" }, });
Each area I want to make scrollable has this format:

<div class="section-content overlayScroll"> <div class="overlayScrollContent"> <div class="inner-title">Some title</div> <div class="inner-content">Some content text</div> </div> </div>

Everything works ok up to maybe 8-10 or so elements but then suddenly everything slows down to a crawl. One thing to note is that I'm using flexbox for most elements.

When I try to use it in my React app, I get this error:

I made
import {OverlayScrollbars} from 'overlayscrollbars/js/OverlayScrollbars';
and after mounting all page try this: OverlayScrollbars(document.querySelectorAll('body'), { });
body element is available in this moment and logging into console: