Keyboard nav causes multiple sly scrollers to move in sync

[tcrgit]

I have several sly objects on my page. They scroll independently using the mouse wheel and buttons. But they do not scroll independently using the arrow keys, but move in sync.

This issue occurs with only two, e.g:

      var div1sly = new Sly('#div1', {
            speed: 200,
            easing: 'swing',
            scrollBy: 2,
            nextPage: $('#div1').parent().find('.forward'),
            prevPage: $('#div1').parent().find('.backward'),
            keyboardNavBy: 'pages',
            activateOn: 'click'
        }).init();

      var div1descsly = new Sly('#div1description', {
            speed: 200,
            easing: 'swing',
            scrollBy: 2,
            nextPage: $('#div1description').parent().find('.forward'),
            prevPage: $('#div1description').parent().find('.backward'),
            keyboardNavBy: 'pages',
            activateOn: 'click'
        }).init();

HTML simplified:

            <div id="div1wrap">
              <div id="pagebuttons">
                <div class="forward">&gt;</div>
                <div class="backward">&lt;</div>
              </div>
              <div id="div1">
                <ul>
                    <li>paragraph 1</li>
                    <li>paragraph 2</li>
                    <li>paragraph 3</li>
                    <li>paragraph 4</li>
                </ul>
              </div>
            </div> 

            <div id="div1descwrap">
              <div id="pagebuttons2">
                <div class="forward">&gt;</div>
                <div class="backward">&lt;</div>
              </div>
              <div id="div1description">
                <ul>
                    <li>paragraph 1</li>
                    <li>paragraph 2</li>
                    <li>paragraph 3</li>
                    <li>paragraph 4</li>
                </ul>
              </div>
            </div> 

[tcrgit]

CSS simplified

<style>
    #div1 { height: 50px; overflow:auto;  border:red thin solid; }
    #div1description { height: 50px; overflow:auto;  border:red thin solid; }
</style>

[darsain]

Could you isolate the issue so I can look at it?

http://jsbin.com http://jsfiddle.net http://codepen.io http://liveweave.com

URL to latest version of Sly:

http://darsain.github.io/sly/js/sly.min.js

[tcrgit]

I created the jsfiddle and updated to use the link tot he most recent sly you posted above. First press of up or down arrow after clicking in a sly window will move in sync. If they are out of sync, they will sync with each other and then scroll in unison.

http://jsfiddle.net/TuT96/1/

[darsain]

Oh, I somehow brainfarted when reading the issue description.

Yes, keyboard navigation will do this. If you specify keyboardNavBy, the concerned sly instance will bind navigation to arrow keys. If you do this for more than one instance, it is obvious that the arrow keys will control multiple sly instances.

I don't know about any sane way how to control multiple sly instances independently with the same keyboard keys. The only exception being 2 sly instances, one horizontal and one vertical. In this case the vertical will be controlled with left & right arrows, while horizontal will be controlled with up & down arrows.

Possible solution

You can disable/enable arrow navigation in runtime by modifying the keyboardNavBy option with sly.set('keyboardNav', newValue). This should make it possible for you to decide when each particular sly instance should accept keyboard navigation.

.set() method documentation.