2

I have these two scroll events firing on dom.ready that synchronize scrolling between my main document and a div's horizontal scrollbar. All works as expected - in all browsers – except for some annoying jank in IE when content gets a little heavy.

Heads-up: the jsScroll0 and jsScroll1 flags stop either scrollbar from locking due to an infinite loop scenario upon each scrollbar trying to set each other’s values.

    $(document).ready(function () {
    //-------------------------------------------
    //  S y n c   t w o   S c r o l l b a r s
    //-------------------------------------------
    // Ver.01
    //Basically the same as my concept:
    //http://stackoverflow.com/questions/762274/how-to-synchronize-scrolling-positions-for-several-iframes
    //Sync's scrollbars, and the flags fix infinite loop.
    //ALSO:
    //http://stackoverflow.com/questions/18952623/synchronized-scrolling-using-jquery
    //has % for scrollbars of different sizes
    var jsScroll0;
    var jsScroll1;
    var windows = [$(document), $('#scrollP')];
    windows[0].on('scroll.scrollInTheSameTime', function () {
        if (jsScroll1 === true) {
            jsScroll1 = false;
            return;
        }
        jsScroll0 = true;
        windows[1].scrollLeft(windows[0].scrollTop());
    });
    windows[1].on('scroll.scrollInTheSameTime', function () {
        if (jsScroll0 === true) {
            jsScroll0 = false;
            return;
        }
        jsScroll1 = true;
        windows[0].scrollTop(windows[1].scrollLeft());
    });
});

I suppose the crux of the matter is why IE struggles and the other's don't? Does IE handle scrolling / fire events completely differently?

ATTEMPT: I tried getting rid of the jquery overhead by using document.documentElement.scrollTop / and accessing the div via document.getElementById('scrollP') - but it didn't make a difference.

Livy Chope
  • 46
  • 4
  • 1
    If this is working code that you want improvement suggestions for, then it belongs on http://codereview.stackexchange.com, not here. – jfriend00 Nov 30 '15 at 02:32
  • If you edited this question to be specifically about why IE is struggling with this code, it would be a better [so] question. If you edited this question to be specifically about how your working code could be improved, you would have a better [codereview.se] question. In its current form though, it seems it's sitting on the fence between two sites' scope. – Mathieu Guindon Nov 30 '15 at 02:36
  • what's the purpose of `jsScroll0 jsScroll1` booleans? – Roko C. Buljan Nov 30 '15 at 02:40
  • What you linked to in the code-comments is not used in your code. Why? – Roko C. Buljan Nov 30 '15 at 02:42
  • Also, just out of curiosity... This question reminds me on an [XY Problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). You're trying to syncronize two elements or you actually have only one element that you want it to scroll horizontally on mousewheel? – Roko C. Buljan Nov 30 '15 at 02:46
  • **Agreed Mat** – my initial posting dilemma, though I do believe something that I’m not aware of in IE is the real cause; hence, stackoverflow? **Hi Roko**, because those solutions suffer from scroll bounce / infinite loop where updating scrollLeft || scrollTop on one scrollbar immediately overrides the other and vice versa causing a lock unless you use the jsScroll0/1 flags…and it’s to control my content by either the main window vertically or the div horizontally [both work in unison]. – Livy Chope Nov 30 '15 at 02:51
  • That edit seems to seal it as a SO question, +1 =) – Mathieu Guindon Nov 30 '15 at 04:05

0 Answers0