(Also, I notice AddToAny author)
1. Summary
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:
- native browser scrollbar instead of gemini-scrollbar;
a2a_floating_style, not a2a_default_style.
2. MCVE
<!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/jquery@3.3.1/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.handleOrientationChange3. Steps to reproduce
I open anchor #Kira (http://192.168.56.1:3014/Erics-Rooms/KiraAddToAny.html#Kira on my localhost) in different browsers.
4. Expected behavior
Latest Firefox (Android and Windows) and Edge versions:
5. Actual behavior
Latest BrowserStack browsers versions for 13.6.2019:
- Android — Chrome
- iOS — Safari
- macOS — Safari
- Windows — Chrome, Opera
I have horizontal scrollbar it top of page → part of page below this scrollbar not active.
Thanks.
(Also, I notice AddToAny author)
1. Summary
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, nota2a_default_style.2. MCVE
3. Steps to reproduce
I open anchor
#Kira(http://192.168.56.1:3014/Erics-Rooms/KiraAddToAny.html#Kiraon my localhost) in different browsers.4. Expected behavior
Latest Firefox (Android and Windows) and Edge versions:
5. Actual behavior
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.