:first_quarter_moon: Custom overlay-scrollbars with native scrolling mechanism for web applications
Home Page: https://noeldelgado.github.io/gemini-scrollbar/
License: MIT License
I don't understand, how I can use smooth scrolling, when I click an anchor link, if I use Gemini scrollbar.
If I use code from this answer:
Source on Codepen — https://codepen.io/Kristinita/pen/NvqBPV.
Demonstration:
Source — https://github.com/KristinitaTest/KristinitaTest.github.io/blob/master/Scrollbar/Gemini-smooth.html.
Demonstration:
I get an error in Firefox native console:
TypeError: el is null
Thanks.
At first, I post this issue for FancyBox issue tracker, but FancyBox owner closed issue without solve.
I click to image → make some actions in FancyBox menu (run slideshow for example):
page scroll to top.
I have this behavior for Gemini scrollbar and no reproduce for native browser scrollbars.
I don't reproduce a bug for browsers native scrollbar.
I reproduce the problems in browsers versions without addons and users settings:
I post this information, because I have strange behavior.
If I record GIF:
problem not reproduced. I can record GIF from about tenth attempt.
Else:
problem reproduced quickly, almost immediately after the start of the FancyBox slideshow.
(Yes, it minimal example)
I open my demo page → I scroll page to any image → I run FancyBox slideshow.
If default scrollbar:
no scrolling to top of page.
Else Gemini scrollbar:
scrolling to page top. See GIF from MCVE for example.
I read many similar questions → try solutions from answers and comments → no effect.
$.fancybox.defaults.hideScrollbar = false; as @fancyapps say
$.fancybox.defaults.autoFocus = false; as @fancyapps say
@theexpand and @hsobhy variants
@Joeran answer. I try modified it to Gemini methods → also no effect.
$('.KiraNotLazy').fancybox({
beforeLoad: function(){
internals.scrollbar.destroy();
},
afterClose: function(){
internals.scrollbar.update();
}
});Thanks.
Hi, @noeldelgado!
I can't use mouseDown event on block with gemini scrollbar because gemini call e.stopImmediatePropagation() in _startDrag function.
I know, stop propagation isn't best practice, because it changes standart behavios of the browser.
Maybe, is there way to avoid stop propogation in this case?
Line 371 in 88c5d04
(Also, I notice AddToAny author)
I can't use gemini-scrollbar + AddToAny default style. I have a critical bug: full web page not displayed correctly in most browsers.
I have expected behavior, if I use:
a2a_floating_style, not a2a_default_style.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kira AddToAny debugging</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/latest/jquery.lazy.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/latest/jquery.lazy.plugins.min.js" defer></script>
<script src="../theme/js/Gemini/GeminiAndJQueryLazy.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.min.css">
<script src="https://static.addtoany.com/menu/page.js" defer></script>
</head>
<body>
<h1>Sasha</h1>
<p><a id="Kira"></a></p>
<h1>Kira</h1>
<div class="a2a_kit a2a_follow">
<a class="a2a_button_feed"></a>
<a class="a2a_dd"></a>
</div>
</body>
</html>// Minimal CSS for native browser scrollbar replacing:
// https://github.com/noeldelgado/gemini-scrollbar#notes
html
body
height 100%
overflow hidden
body
margin 0
padding 0
.gm-scrollbar-container .gm-scroll-view
transform initial
// Margin for headers
h1
margin-top 40rem####################
# gemini-scrollbar #
####################
###
Custom scrollbar instead of native body scrollbar:
https://noeldelgado.github.io/gemini-scrollbar/
https://github.com/noeldelgado/gemini-scrollbar/issues/46#issuecomment-374928170
###
internals = {}
internals.initialize = ->
internals.scrollbar = new GeminiScrollbar(
# querySelector method — https://www.w3schools.com/jsref/met_document_queryselector.asp
element: document.querySelector('body')
autoshow: true
# Force Gemini for correct scrollbar displaying in mobile devices
# https://github.com/noeldelgado/gemini-scrollbar#options
forceGemini: true).create()
internals.scrollingElement = internals.scrollbar.getViewElement()
internals.scrollToHash()
# JQuery Lazy support —
# https://github.com/eisbehr-/jquery.lazy/issues/88#issuecomment-299138103
$('.SashaLazy').Lazy
appendScroll: $(internals.scrollbar.getViewElement())
###
Run method “update” of Gemini:
https://github.com/eisbehr-/jquery.lazy/issues/88#issuecomment-299196388
http://jquery.eisbehr.de/lazy/example_callback-functions
https://github.com/noeldelgado/gemini-scrollbar#basic-methods
###
afterLoad: ->
internals.scrollbar.update()
return
return
internals.handleOrientationChange = ->
internals.scrollbar.update()
internals.scrollToHash()
return
internals.scrollToHash = ->
element = undefined
hash = undefined
hash = location.hash
if hash
element = document.getElementById(hash.replace('#', ''))
if element
internals.scrollingElement.scrollTo 0, element.offsetTop
return
# Listeners
window.onload = internals.initialize
window.onorientationchange = internals.handleOrientationChangeI open anchor #Kira (http://192.168.56.1:3014/Erics-Rooms/KiraAddToAny.html#Kira on my localhost) in different browsers.
Latest Firefox (Android and Windows) and Edge versions:
Latest BrowserStack browsers versions for 13.6.2019:
I have horizontal scrollbar it top of page → part of page below this scrollbar not active.
Thanks.
I can't replace native table horizontal scrollbar, use gemini-scrollbar.
I add table to example from my previous issues:
I want to replace native horizontal scrollbar for tables.
I add to source these lines:
internals.tablescrollbar = new GeminiScrollbar({
element: document.querySelector(".justtable"),
autoshow: !0,
forceGemini: !0
}).create(),Problems:
I can't find real examples for tables in:
Thanks.
new to this lib but am having issue getting it in. imports seem to be fine but i am getting constructor error
js
var myScrollbar = new GeminiScrollbar({ createElements:false, element: document.querySelector('.gm-scrollbar -vertical') }); myScrollbar.create();
html
</div><div id="bigGuy"> <div id="scrollbar" class="gm-scrollbar -vertical"> <div class="thumb"></div> </div>
in update function, something like
this._viewElement.style.height = ((this.element.offsetHeight + SCROLLBAR_WIDTH).toString() + 'px');
this._viewElement.style.width = ((this.element.offsetWidth + SCROLLBAR_WIDTH).toString() + 'px');
const needY = this.element.offsetHeight < this._viewElement.scrollHeight;
const needX = this.element.offsetWidth < this._viewElement.scrollWidth;
if (needY){
if (!this.needY) this._scrollbarVerticalElement.style.display = '';
//here all thumb size calculation
}else if (this.needY){
this._scrollbarVerticalElement.style.display = 'none';
}
this.needY = needY
//samething for needX
if (needX || needY) this._scrollHandler();
return this;
I'm designing an image viewing application in Electron, and I'm not sure if I'm setting up Gemini incorrectly, or it's simply not the right tool to use.
My app is designed, in part, to display images at 100% size with the application window perfectly proportionally scaled to them. However, the default chromium scrollbar creates a track ~20 pixels wide outside the DOM (# 1), and when I try to restyle it, I can't overlay the scrollbar over the image content.
Section # 2 is the app with scrollbars disabled, # 3 is the kind of scrollbar style I'd like to use but with the ugly track visible, and # 4 is what I'd like the end result to look like.
Can Gemini overlay the scrollbar over an image element like this? Here's a jsfiddle containing the relevant elements from my app, but it doesn't seem to work (I very likely set it up wrong): https://jsfiddle.net/devedge/fc5ad2fw/
It would be nice to easily be able to get the % scrolled rather than having to calculate ourselves (which can be kind of messy). This could be used for things like displaying shadows, etc, based on scroll %.
Something like
this.scroll.getScrolledPercent() // .4
(or if you have a good way to solve this without using private methods/vars that would be cool too)
I want to replace default browser body scrollbar to custom scrollbar. I can't do it, if I use Gemini-Scrollbar.
My GeminiTest.html file: https://codepen.io/Kristinita/pen/aWWqQE.
I create it as in official repository description.
I reproduce the problem in a Chrome and Opera.
I open GeminiTest.html in browser.
Custom body scrollbar.
I get in Firefox console:
ReferenceError: require is not definedI don't get custom scrollbar.
Operating system and version:
Windows 10 Enterprise LTSB 64-bit EN
Firefox:
53.0 (64-bit)
Gemini-Scrollbar:
The latest stable version of Gemini-Scrollbar
Thanks.
When createElements option is set to false plugin should not destroy scrollbar and view div's when called destroy() method.
I have a multiple divs which classname is same and I want to apply scrollbar to all div is it possible because if I will use
var myScrollbar = new GeminiScrollbar({
element: document.querySelector('.my-scrollbar')
}).create();
it will take very first element how I can assign scroll to multiple element
So I have included the gemini scrollbars js <script src="js/content-scroller/index.js"></script> in the index.html of an angular app. They work on first visit to the view they are in... but then navigate to a different view and come back to the view they are in and the scrollbars are gone. How would I re initialize them ?
if you create one gemini with forceGemini set to false,
and then another set to true,
when SCROLLBAR_WIDTH is zero, it will cause the DONT_CREATE_GEMINI variable to be overridden.
suggest to replace the variable with this.dontCreateGemini
On Mac OS X 10.10.2, if you have Preferences/General Show Scrollbar: Only when Scrolling the lib will create custom scrollbars but, it should NOT.
I was diggin' the issue, it was added by this commit. On that commit I was trying to solve an issue when ::-webkit-scrollbar was declared with either a width or an explicit height value, that was causing the scrollbarWidth fn check to return a value greater than zero even when the OS has native overlay-scrollbars. So, by reseting the ::-webkit-scrollbar width property to its initial value on the scroll-width fn test, it was (at least) working fine for iOS but not for OS X.
In order to “close” this for now, I am removing the .gm-test::-webkit-scrollbar { width: initial; } declaration I had just for the scrollbarWidth fn test and point to the commit fixing this issue on the readme, recommending to remove any webkit scrollbar pseudo-elements you may have from your CSS. That will solve the issue for iOS and OS X as well. Anyway, why would someone want to have custom css scrollbars when using this lib...
This part seems to be breaking the code for me, it won't add the class names to the elements
addClass(this._viewElement.className, [CLASSNAMES.view]);
addClass(this._scrollbarVerticalElement.className, [CLASSNAMES.verticalScrollbar]);
addClass(this._scrollbarHorizontalElement.className, [CLASSNAMES.horizontalScrollbar]);
addClass(this._thumbVerticalElement.className, [CLASSNAMES.thumb]);
addClass(this._thumbHorizontalElement.className, [CLASSNAMES.thumb]);
The addClass function doesn't accept a string with spaces ('gm-scrollbar -vertical' and 'gm-scrollbar -horizontal') and it also seems to want the element parameter without .className
If Gemini Scrollbar enable for me, I get warning message in Firefox built-in console.
I open official demonstration page — http://noeldelgado.github.io/gemini-scrollbar/ → I open Firefox console.
No warnings in console.
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!Operating system and version:
Windows 10 Enterprise LTSB 64-bit EN
Firefox:
53.0 (64-bit)
Thanks.
Most, if not all popular scrollbar libraries have a scrollTo method that supports pixel positions as well as top bottom left right strings. If you can suggest an alternative solution with your current code base, I'd be happy to hear :)
Thanks in advance.
Hi, I really like the way your plugin works!
However, zooming in/out the screen will reveal the native scrollbars. They are also visible before the plugin is applied, which is not a problem on initial load of the page, but when i dynamically add new elements.
I think this small improvement will do the job. It will be better if the .gm-scroll-view is absolutely positioned and has no fixed width and height. Let the developer set the width and the height of the wrapper (for example 100%/100%) and the .gm-scroll-view should be stretched with left: 0; top: 0; right: -[nativeScrollbarWidth]; bottom: -[nativeScrollbarWidth];, where the given css should be appended to the body the first time the plugin is used, since it needs to calculate the nativeScrollbarWidth. This way you will not have to resize the view every time the wrapper is resized, or for the sequential dynamically added elements, since the css will take care of that. In fact you did this with the scrollbars.
If something is not clear you may find similar approach with nanoScroller.js. But I prefer your plugin and i hope you will find my suggestion useful!
Best
Hello,
There was in the plugin a way to hide all scrollbar default browser?
I would only see the scrollbar components and hide the browser by default, it's possible ?
Best regards,
If I click to last anchor in web page with gemini scrollbar:
I get horizontal scrollbar in bottom of page.
In real projects I have same problem.
I open https://s.codepen.io/noeldelgado/debug/1a5c2193f5f40164f354f17bab24ecbd page (it your pen) → I click to «Relevance» anchor link.
No scrollbar in bottom of page.
Horizontal native browser scrollbar in bottom of page.
Thanks.
Native iframe lazy-loading doesn’t work for browsers, that support it without polyfill if I use gemini-scrollbar.
Network section of browser developer tools.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kira iframe native lazy-loading + gemini-scrollbar MCVE bug</title>
<!-- [INFO] Polyfill for browsers that don’t support iframe lazy-loading:
https://github.com/mfranzke/loading-attribute-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/loading-attribute-polyfill/dist/loading-attribute-polyfill.umd.min.js" async></script>
<script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.min.css">
<style>
html {
height: 100%;
}
p {
margin-bottom: 200rem;
}
</style>
<script>
window.onload = function() {
var scrollbar = new GeminiScrollbar({
element: document.querySelector("body")
}).create();
};
</script>
</head>
<body>
<p>Kira Genius!</p>
<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/5d800b76-c468-4510-b2af-d84d28def4a9"></iframe></noscript>
<p>Kira Hero!</p>
<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/15613130-601b-4101-bc39-2dde03256254"></iframe></noscript>
<p>Kira Amazing!</p>
<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/8c9305e6-671e-4d4d-9abe-e045cc9740df"></iframe></noscript>
<p>Kira Goddess!</p>
<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/1c93a77b-371d-446c-a293-6a872a2088a9"></iframe></noscript>
</body>
</html>For Firefox and Safari, which don’t support lazy loading for iframes by default and works via polyfill, iframes successfully loaded lazy.
But Chrome, Opera and Edge supporting lazy loading for iframes by default, all iframes content are loaded immediately when the URL is opened. No lazy loading. It’s very bad for web performance.
I give here an example without a custom scrollbar to demonstrate that the bug related to gemini-scrollbar.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"
+ <title>Kira iframe lazy-loading MCVE</title>
- <title>Kira iframe native lazy-loading + gemini-scrollbar MCVE bug</title>
<!-- [INFO] Polyfill for browsers that don’t support iframe lazy-loading:
https://github.com/mfranzke/loading-attribute-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/loading-attribute-polyfill/dist/loading-attribute-polyfill.umd.min.js" async></script>
- <script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js" defer></script>
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.min.css">
<style>
- html {
- height: 100%;
- }
p {
margin-bottom: 200rem;
}
</style>
- <script>
- window.onload = function() {
- var scrollbar = new GeminiScrollbar({
- element: document.querySelector("body")
- }).create();
- };
- </script>
</head>
<body>
<p>Kira Genius!</p>
<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/5d800b76-c468-4510-b2af-d84d28def4a9"></iframe></noscript>
<p>Kira Hero!</p>
<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/15613130-601b-4101-bc39-2dde03256254"></iframe></noscript>
<p>Kira Amazing!</p>
<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/8c9305e6-671e-4d4d-9abe-e045cc9740df"></iframe></noscript>
<p>Kira Goddess!</p>
<noscript class="loading-lazy"><iframe loading="lazy" src="https://video.ploud.fr/videos/embed/1c93a77b-371d-446c-a293-6a872a2088a9"></iframe></noscript>
</body>
</html>
Lazy loading for iframes successfully works for all browsers I tested.
When the page loads, solely the first iframe is loaded:
The remaining 3 iframes are loaded as the page scrolls down:
Local:
Microsoft Windows [Version 10.0.19041.1415]:
--disable-extensions and --disable-plugins arguments)BrowserStack:
macOS Monterey:
Windows 11:
Thanks.
Given a parent and a child container, both gemini enabled, both with autoshow: true, hovering the parent will show the child container scrollbars.
Right now the method getViewElement will return null if the scroll bars were not created.
Defaulting the reference returned by this method to the element passed during instantiation will mostly solve this issue because if the scroll bars are not created at all this element is the one that should have the scrolling behaviour anyways.
So, if you are relying on this method for things like getting information about the scroll-status this will still work as expected.
Hello, i have a div #contentWrapper with position:relative, the scrollbar is attached to this element and it is working fine, but inside i have some elements with position:absolute, and the scrolling doesn't work when the mouse is over those elements.
The native scrolling is working, but not with gm.
How i can solve this issue? Thanks
How to track scroll position on user interaction?
I'd would be nice to have callback passed to options called everytime position changes.
My gm-scrollbar-container has padding, so the this._viewElement.style.width is wrongly calculated.
The padding of gm-scrollbar-container should be considered to set the _viewElement width.
Nice work.
For the horizontal scrollbar, would be great to have support for right-to-left languages. Like 'Arabic','Hebrew','Farsi','Urdu'... etc.
Hi,
Is this plugin working for textareas? I can't seem to make it work, and since I know textareas are special case I was looking for a plugin that did cover them. There are no limitations in your docs so I just assumed that they would work.
It would be nice to have the ability to change default gemini class names, for example passing it names into options.
Ran into this issue while using an application that uses gemini scrollbars - they won't display in my browser, instead falling back to native scrollbars. Here's a screenshot from the demo page.
Browser is Firefox 44.0.2 on Kubuntu 15.10 w/ KDE Neon repos, in case any of that is relevant.
On OSX, you get native scrolling experience, which is great.
Would you consider adding config option to force Gemini instead of native scrolling?
You might ask what's the benefit here. None, beside you can test behaviour when Gemini is enabled on other OSes/browsers without overlay scrollbars support. Basically, in DEV environment only.
If you don't mind this, I can create PR for this.
On IE 11 the inserted (.gm-resize-trigger) is displayed as a white block overlaying the scrollable content. Adding visibility: hidden removes it, but I'm not sure if that breaks the 's functionality.
Seems to work fine on 9 and 10, but I have not tested anything over IE11.
visual feedback to keep things in sync
If there lots of elements in scrollable view, thumb is very small
If for some reason, the script was loaded on the head, the scrollbarWidth fn check will thrown an error due to the immediately-invoked function expression (IIFE) making the lib unusable.
Removing the IIFE and checking the scrollbarWidth until instantiation will remove that error.
Once your content increases to more than ten thousand pixels in length (let's say like 30,000 pixels) and you scroll to the bottom, the scrollbar's thumb will go out of the rail's bounds (I would guess it is the percentages inaccuracy).
I'm horrible at explaining and it's early morning, so just check this sample (scroll to the bottom and watch the vertical thumb).
https://plnkr.co/edit/srL3ikhh1soOrrXDfDND?p=preview
I wonder if it could be fixed using a minimum height/width for the thumbs or if it's related to the actual content based calculations.
Now plugin does not support scrollbar width/height that is smaller than clientWidth/clientHeight.
Replace _mouseMoveDocumentHandler method with this:
GeminiScrollbar.prototype._mouseMoveDocumentHandler = function(e) {
if (this._cursorDown === false) {
return;
}
var offset, thumbClickPosition, thumbPositionPercentage;
if (this._prevPageY) {
offset = ((this._scrollbarVerticalElement.getBoundingClientRect().top - e.clientY) * -1);
thumbClickPosition = (this._thumbVerticalElement.offsetHeight - this._prevPageY);
thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this._scrollbarVerticalElement.offsetHeight); //CHANGE
this._viewElement.scrollTop = (thumbPositionPercentage * this._viewElement.scrollHeight / 100);
return;
}
if (this._prevPageX) {
offset = ((this._scrollbarHorizontalElement.getBoundingClientRect().left - e.clientX) * -1);
thumbClickPosition = (this._thumbHorizontalElement.offsetWidth - this._prevPageX);
thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this._scrollbarHorizontalElement.offsetWidth); //CHANGE
this._viewElement.scrollLeft = (thumbPositionPercentage * this._viewElement.scrollWidth / 100);
}
};
Hello
thanks for a great work
gemini scrollbar has a conflict with scrollTop code , please see it here in jsfiddle
http://jsfiddle.net/neeklamy/RpPEe/
<script>
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#backtop').fadeIn();
} else {
$('#backtop').fadeOut();
}
});
$('#backtop').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
</script>
`
the above code not work with gemini scrollbar
can you help me ?
thanks
When I tryin to set custom thumbnail width using css like this:
.gm-scrollbar.-horizontal .thumb {
width: 30px !important;
}
Plugin calculations works wrong.
It would be nice to have additional options: minThumbSize and maxThumbSize to specify in px.
If you zoom-out, the native scrollbar become visible
I noticed chrome updated a few days ago to version 62(Version 62.0.3202.94 Official Build 64-bit, osx 10.12.6) and the scrolling seems to have stopped for me. Here I am scrolling up and down the page but the scrollbar won't activate. I can select text within the scrolling area, so I don't think it's a focus issue.
I also noticed firefox updated to version 57 and that works just fine.
I've found this to be fairly consistent, though once chrome DID start scrolling, I refreshed and it had stopped again and I can't figure out why.
When I zoom out my page, Native scrollbars of browser become visible.
I guess this bug occurs because scrollbar width is changing during zoom in and zoom out.
1.3.0 and 1.2.6
go to http://noeldelgado.github.io/gemini-scrollbar/, zoom in to 200%, press F5, zoom out back to 100%
If default Gemini scrollbar configuration, the default body scrollbar of the browser is shown instead of the custom Gemini scrollbar in Firefox since version 100, Safari since version 7.1 and in all modern mobile browsers.
For the latest Chrome, Opera and Edge versions at the time of writing this issue default configuration works as expected.
This MCVE on Repl.it:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kira Gemini scrollbar MCVE</title>
<script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.min.css">
<style>
html {
height: 100%;
}
.gm-scrollbar.-vertical {
width: 2rem;
background-color: red;
}
.gm-scrollbar .thumb {
background-color: blue;
}
p {
margin-bottom: 200rem;
}
</style>
<script>
window.onload = function () {
var scrollbar = new GeminiScrollbar({
element: document.querySelector("body")
}).create();
};
</script>
</head>
<body>
<p>Kira Goddess!</p>
<p>Kira Genius!</p>
<p>Kira Hero!</p>
<p>Kira Amazing!</p>
</body>
</html>For Gemini scrollbar demo page I get the same behavior as for MCVE.
In Firefox, Gemini scrollbars with default configuration stopped working after Firefox 100 was released in May 2022.
Firefox 99:
Firefox 100:
I tested MCVE and Gemini scrollbar demo page in the latest browsers at the time of writing this issue, using BrowserStack Live.
Windows 11:
macOS Sonoma:
Google Pixel 8 Pro, Android 14:
Samsung Galaxy S23 Ultra, Android 13:
iPhone 15
Thanks.
function _clickVerticalTrackHandler(e) {
var offset = e.offsetY - this._naturalThumbSizeY * .5,
thumbPositionPercentage = offset * 100 / this._scrollbarVerticalElement.clientHeight;
this._viewElement.scrollTop = thumbPositionPercentage * this._viewElement.scrollHeight / 100;
> this._prevPageY = this._thumbSizeY - e.offsetY + offset;
> this._startDrag(e)
}
If block has max-width but content less than max-width native scrollbar is visible.
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.