noeldelgado / gemini-scrollbar

:first_quarter_moon: Custom overlay-scrollbars with native scrolling mechanism for web applications
https://noeldelgado.github.io/gemini-scrollbar/
MIT License
428 stars 63 forks source link

bug(compatibility): gemini-scrollbar + AddToAny #64

Open Kristinita opened 5 years ago

Kristinita commented 5 years ago

(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:

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.handleOrientationChange

3. 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:

Expected

5. Actual behavior

Latest BrowserStack browsers versions for 13.6.2019:

Actual

I have horizontal scrollbar it top of page → part of page below this scrollbar not active.

Thanks.