Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Kristinita opened this issue Jun 13, 2019 · 0 comments
Open

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

Kristinita opened this issue Jun 13, 2019 · 0 comments

Comments

@Kristinita
Copy link

Kristinita commented Jun 13, 2019 •
edited
Loading

(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/[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.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:

  • Android — Chrome
  • iOS — Safari
  • macOS — Safari
  • Windows — Chrome, Opera

Actual

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

Thanks.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Kristinita