[Bug] This site appears to use a scroll-linked positioning effect.

[Kristinita]

1. Summary

If Gemini Scrollbar enable for me, I get warning message in Firefox built-in console.

2. Steps to reproduce

I open official demonstration page — http://noeldelgado.github.io/gemini-scrollbar/ → I open Firefox console.

3. Expected behavior

No warnings in console.

4. Actual behavior

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!

5. Environment

Operating system and version:
Windows 10 Enterprise LTSB 64-bit EN
Firefox:
53.0 (64-bit)

Thanks.

[Kristinita]

@noeldelgado , ping.

Can you see Stack Overflow question about gemini-scrollbar, when you will have a free time?

Thanks.

[noeldelgado]

@Kristinita, I made a demo trying to answer your question on SO (I don't have a SO account 😟):
demo: https://codepen.io/noeldelgado/pen/1a5c2193f5f40164f354f17bab24ecbd/

4) override gm-scroll-view's transform value, that will allow fixed position to work:
Reason explained on this answer

.gm-scrollbar-container .gm-scroll-view {
  transform: initial;
}

6.2) I will suggest listening to orientationchange and update the scroll position when the event fires. This piece of code is on demo as well:

window.onorientationchange = function() {

    var hash = location.hash;

    if (hash) {
      var top = document.getElementById(hash.replace('#', '')).offsetTop;

      scrollingElement.scrollTo(0, top);
    }
};

Hope that helps.

[Kristinita]

@noeldelgado ,

1. Summary

1. Scrolling only main element successful works for me.
2. I can't open anchors — scrollbar move to begin of page.

2. Steps to reproduce

I fork your pen — https://codepen.io/Kristinita/pen/JLWgvz → I made 1 change: I move <h2 id="relevance">Relevance</h2> in end of article.

I open https://s.codepen.io/Kristinita/debug/JLWgvz/nqMwveZBVOvk#relevance page → I force refresh cache.

3. Expected behavior

Scrollbar in relevance section:

4. Actual behavior

Scrollbar in begin of page:

5. Environment

• Firefox 59.0.1 (64-bit),
• Chrome Version 64.0.3282.186 (Official Build) (64-bit).

Latest browser versions at the time.

Thanks.

[noeldelgado]

Sorry, I cannot check the debug mode, it says "This debug view expired". However I can see it's working on your fork, so, dunno.

[Kristinita]

@noeldelgado ,

Sorry, I cannot check the debug mode, it says "This debug view expired".

Your pen author is Captain Anonymous → you not logged on Codepen. Debug mode works only for logged users. It free.

Thanks.

[noeldelgado]

Since gemini will move all nodes into a different element the initial scroll position will be lost.
A workaround is to call the logic to scroll to the anchor after initializing the gemini instance.

fork: https://codepen.io/noeldelgado/pen/1a5c2193f5f40164f354f17bab24ecbd/
debug mode: https://s.codepen.io/noeldelgado/debug/1a5c2193f5f40164f354f17bab24ecbd#relevance

[Kristinita]

@noeldelgado, thanks, it works!

3 problems:

1. eslint

eslint output:

  6:28  error  'GeminiScrollbar' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

I can't find, how I can disable this error. my .eslintrc.yml file:

env:
  browser: true
  es6: true
  jquery: true
extends: 'eslint:recommended'
parserOptions:
  ecmaVersion: 9
  sourceType: script
  ecmaFeatures:
    jsx: true

2. Horisontal scrollbar

See #59.

3. Default

Maybe, would be better move your changes by default, to index.js, that user configuration file will be more simple?

Thanks.

[Kristinita]

@noeldelgado , I add answer to Stack Overflow. If you want add your own answer, I can delete my at any point in time.

Thanks.