Hello, it's me again...

trackTransition = 'height 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s',

Please remove the whole trackTransition from JS, it does belong to the CSS side. Imagine a container that continuously is refreshing or just refreshed on a event - this is causing the scrollbar animation each time, what looks kind of ugly.

I need that !important hack at the moment:

.optiscroll-htrack, .optiscroll-vtrack {
    transition: none !important;
}

Hey,

I hacked around your code to analyse why Optiscroll generates unneeded scrollbars in Chrome.

Please read the code comments above!

Using Math.max instead Math.min fixed the issue but I think we have to check if sizeRatio is lower than maxTrackSize instead?

I did not completly understand the calc() magic, please tell me if you can confirm this bug.

Math bugfix:

sizeRatio = Math.max(sizeRatio, settings.maxTrackSize / 100);

Another bugfix:

if (sizeRatio < settings.maxTrackSize) {
    return { position: 0, size: 1, percent: 0 };
}

Related fiddle: http://jsfiddle.net/ty4ca48z/4/ (uncomment related code to see useless scrollbar)

Method with debug and comments:

calc: function () {
      var position = scrollEl[scrollProp],
          viewS = cache[clientSize], 
          scrollS = cache[scrollSize], 
          sizeRatio = viewS / scrollS,
          sizeDiff = scrollS - viewS,
          positionRatio, percent;

      if(sizeRatio === 1 || scrollS === 0) { // no scrollbars needed
        return { position: 0, size: 1, percent: 0 };
      }

      percent = 100 * position / sizeDiff;

      // prevent overscroll effetcs (negative percent) 
      // and keep 1px tolerance near the edges
      if(position <= 1) { percent = 0; }
      if(position >= sizeDiff - 1) { percent = 100; }
      
      // Capped size based on min/max track percentage 
      sizeRatio = Math.max(sizeRatio, settings.minTrackSize / 100);
      sizeRatio = Math.min(sizeRatio, settings.maxTrackSize / 100);

      positionRatio = (1 - sizeRatio) * (percent / 100);

      // positionRatio returns 0.050000000000000044
      // sizeRatio in my case returns 95 and therefore generates a useless scrollbar
      console.log(positionRatio);
      console.log(sizeRatio);
        
      return { position: positionRatio, size: sizeRatio, percent: percent };
    }

I believe the container "optiscroll-content" could be added dynamically:

<div id="scroll" class="optiscroll">
    <div class="optiscroll-content">
        <!-- this is the area that actually scrolls -->
        My content
    </div>
    <!-- scrollbars elements will be added here  -->
</div>

This propose is for easy use of optiscroll:

<div id="scroll" class="optiscroll">
    My content
</div>

Why don't you use the native Element.scrollIntoView()

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Hi Alberto,

How would I initiate multiple scrolls in a page in plain javascript?
Say I have the main element and then some other smaller elements I want optiscroll to work with.

EDIT:
this does not seem to be working:
var element = document.querySelectorAll("#scroll1, #scroll2");

Thanks!

Hi, great work with Optiscroll, as the title say, is it possible to scroll on mouse click on the scroll bar if it is allways visible? (forceScrollbars: true)
Thanks

As title says... I can't click and drag on the scrollbar in Firefox to scroll. Only the mousewheel works for vertical scrolling (horizontal scrolling is impossible without the click/drag functionality). Works fine in IE and Chrome.

Reproducible on the Optiscroll example site.

Optiscroll limits the scrolling to within the scrolled element, and doesn't scroll the entire page when it reaches the edges of the content, regardless of setting.

Sry, its me again ^^.
I had to find out that scrolling inside a nested div is a bit tricky on iOS.

As roundup:
overflow: auto; for the nested div - you can scroll inside the div but without a scrollbar and the scrolling isnt smooth.

-webkit-overflow-scrolling: touch; for the nested div - now you have a scrollbar and a smooth scrolling too.

BUT in both situations the script seemes not to work perfect together with this iOS scrolling settings, cause the divs start flickering at fast scrolling and on reaching the end or top of the nested div.

First, thx 4 your great plugin!
Secondly, how can I destroy() it on the jQuery way?

For Example, I initialize it like this:

$(document).ready(function (){
    scrollbar();
});

function scrollbar(){
    $('.box').optiscroll();
}

And try to destroy it like this (not working):

$(document).ready(function (){
    if ($('body').outerWidth() <= 800 ) {
       scrollbar.destroy();
    }
});

Whats my fail?

Hi,
Any callback for scrollIntoView end event ? Why ? I need to do some stuff after ending of scrollIntoView. (no i don't want to do an ugly setTimeout())

Thanks for your lib ! 👍

Using the scrollbar on the body element removes the window scroll event and offset variables

is there a way to tell optiscroll not to inject the horizontal markup?

<div class="optiscroll-h"><b class="optiscroll-htrack"></b></div>

or vice-versa in the only horizontal is used.

basically inject only what's in use.

Hi Alberto

I use AOS Animate, both AOS and Optiscroll work perfectly separately, If Optiscroll is implemented it stops the AOS JS animation on the page when mouse scrolling, thus hiding my content.
Is there a way to prevent the plugin conflicting so I can use both instead of just one or the other? I have pasted below as I am not great with jquery or javascript.

Thian

 `<script src="templates/{$template}/animate/js/aos.js"></script>
{literal}<script>
$(document).ready(function () {
      AOS.init({
        easing: 'ease-in-out-sine'
      });
	});
    </script>{/literal}`

<!-- the Optiscroll  script -->
<script type="text/javascript" src="templates/{$template}/html/js/optiscroll/jquery.optiscroll.js"></script>

<script type="text/javascript">
$(document).ready(function () {
$('#scroll').optiscroll()
});
</script>

1. A carousel that is using scrollIntoView() that cannot be deactived
2. A Optiscroll on top of that carousel

Please checkout this fiddle: http://jsfiddle.net/ty4ca48z

Comment in the last line to enable the weird scrollbar bug.

You now can enable and disable one of the following inline styles with Firebug and the bug disappears.

element.style {
    bottom: -13px;
    overflow: scroll;
    right: -13px;
}

Update: It seem like the margin on .pf-item-overview is causing this issue!

Please checkout this fiddle: http://jsfiddle.net/ty4ca48z/1/

Any idea how Optiscroll can prevent issues with such a buggy / negative scroll offset?

The problem happens when scrollbars are hidden by default, and shown only while scrolling:

It's weird because it takes place only on Firefox, but I could see in your website that it's perfectly fine, regardless of OS setting.

On Android, with preventParentScroll: true, Optiscroll will sometime reset the scroll position to 0 on touchstart if fast scroll from 0.
The problem looks like is caused by touchstart calling Events.wheel(), and somehow this condition gets executed:

if(cacheV.enabled && cacheV.percent % 100 === 0) {
   me.scrollEl.scrollTop = cacheV.percent ? (cache.scrollH - cache.clientH - 1) : 1;
}

Hi,

while debugging strange bug in my application, i've stumbled upon this piece of code

    // unwrap content
    if (!this.settings.contentElement) {
      while(child = scrollEl.childNodes[0]) {
        element.insertBefore(child, scrollEl);
      }
      element.removeChild(scrollEl);
      this.scrollEl = null;
    }

I'd tried to find any reference for contentElement but found none.
Am i missing something or there should be check for wrapContent?

Hi Albert

I have tried every combination to try and the hide the browsers scroll bar and show the Optiscroll track.
The Jquery wraps the code ok with the elements, could you please advise?

Hi!

Using the 3.0 version I tried to set .optiscroll-v {left:0;} and .optiscroll-vtrack {...left:6px;} with direction:rtl:
While the original scrollbar disappears, the drag zone is still under the original scrollbar and the new bar is 6px at right.

Thanks for your time!

do you indicate direction of scroll? up/down?

So if I go down - I can go to next div or such

Hey Wilson, I really like your plugin but the CSS far from perfect :-)

Let me show my workover, maby you find it useful:

1. Combined and ordered all definitions
2. Switched from PX to REM
3. Removed useless vtrack and htrack offset
4. Improved transition delay out
5. Moved the draggable area to vtrack and htrack

Suggestions:

1. Use shorthand translateZ(0) to enable CSS performance
2. Uncomment or remove the user-select block
3. Run autoprefixer over your CSS, many vendor prefixes are outdated
4. Add namespace to .htrack-on and .vtrack-on
5. Consider a naming convention like: https://github.com/redaxmedia/ncss

/**
 * @tableofcontents
 *
 * 1. scrollbar
 *    1.1 horizontal and vertical
 *    1.2 track
 */

/* @section 1. scrollbar */

.optiscroll {
    position: relative;
    overflow: hidden;
}

.optiscroll-content {
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    position: absolute;
    top: 0;
}

/* @section 1.1 horizontal and vertical */

.optiscroll-h {
    height: 0.25rem;
    left: 0.5rem;
}

.optiscroll-v {
    top: 0.5rem;
    width: 0.25rem;
}

.optiscroll-h, .optiscroll-v {
    bottom: 0.5rem;
    opacity: 0;
    position: absolute;
    right: 0.5rem;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: opacity 0.2s ease-out 0.8s;
}

/* hover */

.htrack-on:hover .optiscroll-h, .vtrack-on:hover .optiscroll-v {
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

/* @section 1.2 track */

.optiscroll-htrack, .optiscroll-vtrack {
    background: #aaa;
    cursor: pointer;
    left: 0;
    position: absolute;
    top: 0;
}

.optiscroll-htrack {
    height: 100%;
}

.optiscroll-vtrack {
    width: 100%;
}

.optiscroll-htrack:active, .optiscroll-vtrack:active {
    background: #999;;
}

/* draggable area */

.optiscroll-htrack:before, .optiscroll-vtrack:before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    bottom: -0.5rem;
    right: -0.5rem;
}

Keep on the good work!

Hi, does this support <textarea> elements? Thanks!Q

Hello,

It would be nice to have an on initialised event.

Is there any way to detect it currently ?

While animating to a scroll position, if the user interacts the scroll behaviour becomes chunky.
Optiscroll should listen for wheel and touchstart interactions and stop the animation immediately

I'm not sure how I should represent my specific use-case, but I'm writing a chat application which adds elements dynamically to a container with a message-tray element. The container is instantiated as the scroll object with Optiscroll.

For some reason (only in FireFox) after I add about 10 messages, the entire screen starts flickering like it's trying to re-render the objects in the container... It's very strange. Here's some of my code.

// Initialization
this._scrollObj = new Optiscroll(this._oPort, {
  autoUpdate: false
 });


scrollPort() {
  // The timeout is arbitrary to wait until the object is rendered to the 
  // container before the update happens.
  setTimeout(() => {
    this._scrollObj.update();
    this._scrollObj.scrollTo(false, 'bottom', 300);
  }, 50);
}

The above scrollPort method is only executed when a message is added to the message-tray. I should also mention that this bug still exists even without the execution of the scrollPort method. Just having the Optiscroll instantiated, is enough to cause it to glitch out.

edit I should add that I removed all transitions from the inner elements and still no luck. I'm also using the vanilla JavaScript version, NOT jQuery.

On touchscreen laptops, like Lenovo Yoga X1, mouse drag event doesn't work. You can't click or drag scroll. But touch event works. You can touch and drag scroll. I am using Chrome browser, version 59.0.3071.86

The instructions seem simple and clear enough, I have tried a few times on a few different documents with the same results... nothing. Here is another example:

https://codepen.io/drvid/pen/vvyNBJ

Any ideas what's wrong? Hopefully any mistakes in my code are easy to spot.

Hi, this looks awesome. I'm always looking for a good implementation of custom scrollbars. I did a test with zooming out and unfortunately, the native scrollbar shows up behind the optiscroll. If I refresh the page (zoomed out), it works fine and hides the native scrollbar. Do you think this is something that can be recalculated/fixed on some sort of resize or zoom out event?

Hello,

there is a strange issue on mobile Safari. I cannot "swipe" the scrollable container by default, but after using one of the tracks the container can be scrolled using touch gestures.

It seems like something goes wrong with preventParentScroll, it maby is focusing the wrong container?

Best regards

When reload page with cursor inside Optiscroll area the scrollbar not load, but if move cursor outside and back works:

Hi there,

I'd like to use this as a dependency in https://github.com/jonataswalker/ol3-contextmenu but this is not an NPM package.

May you publish it?

Great work. Thank you.

Hi this library is great! But when I try to dynamically scroll elements, it does not work.
For example, I create a Optiscroll on load, and later append some children elements into my container, but optiscroll does not handle appended children, and it seems that appended children are outside of optiscroll wrapper.

Windows 7
IE9.0.8112.16421

Error: SCRIPT445: Object doesn't support this action

Line#: 437 -
var eventData = this.exposedData(), cEvent = new CustomEvent(eventName, { detail: eventData });