albertogasparin / optiscroll Goto Github PK
View Code? Open in Web Editor NEWCustom scrollbars for modern webapps. Supercharge the native scroll!
Home Page: http://albertogasparin.github.io/Optiscroll/
License: MIT License
Custom scrollbars for modern webapps. Supercharge the native scroll!
Home Page: http://albertogasparin.github.io/Optiscroll/
License: MIT License
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 ! ๐
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?
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
?
do you indicate direction of scroll? up/down?
So if I go down - I can go to next div or such
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!
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>
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
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?
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.
Hey Wilson, I really like your plugin but the CSS far from perfect :-)
Let me show my workover, maby you find it useful:
vtrack
and htrack
offsetvtrack
and htrack
Suggestions:
user-select
block.htrack-on
and .vtrack-on
/** * @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!
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>
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 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.
Hello,
It would be nice to have an on initialised event.
Is there any way to detect it currently ?
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!
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
Using the scrollbar on the body element removes the window scroll event and offset variables
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
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 }; }
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.
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 });
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.
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, does this support <textarea> elements? Thanks!Q
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.
Why don't you use the native Element.scrollIntoView()
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
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; }
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 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, 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
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.