Trying to get touchpad scrolling to work.

[jbrukh]

Hi there,

I am trying to get the Sly library to scroll the FRAME div just from the trackpad of a Macbook Pro. To be clear, I am specifically looking for scrolling the items in my frame (inside the .slidee element) using the two finger gesture -- I am not interested in click-and-drag.

I have the following:

 <div id="frame" class="frame">
    <ul class="slidee">
      <li>dkfsjdsakjf</li>
      <!-- ... other items -->
    </ul>
  </div>
  <div class="scrollbar-container">
    <div id="scrollbar" class="scrollbar">
      <div class="handle"></div>
    </div>
  </div>
  <script>
    var options = {
      horizontal: 1,
      itemNav: 'basic',
      scrollBar: '#scrollbar',
      dragHandle: true,
      speed: 300,
      mouseDragging: 1,
      touchDragging: 1
    };
    $('#frame').sly(options);
  </script>

The SCSS for these is here:

.frame { width: 100%; height: 160px; padding: 0; }
.frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; }
.frame .slidee li { float: left; margin: 0 5px 0 0; padding: 0; width: 120px; height: 100%; }

.scrollbar { width: 100%; height: 30px; }
.scrollbar .handle {
    width: 100px; /* overriden if dynamicHandle: 1 */
    height: 100%;
    background: #222;
    border-radius: 1em;
    cursor: pointer;
}

.scrollbar-container {
  background-color: lightgrey;
  opacity: .5;
  bottom: 1em;
  padding: 1em;
  width: inherit;
}

However, I am not able to horizontally scroll the #frame nor am I sure if that is a supported feature. Any help is greatly appreciated!

Thanks! Jake

[sergey-dev]

Have you tried to use options from scrolling section?

It's in relation to mouse wheel scroll events. The trackpad of a Macbook Pro "emulates" regular scrolling events alike a mouse wheel does.

    // Scrolling
    scrollSource: null,  // Element for catching the mouse wheel scrolling. Default is FRAME.
    scrollBy:     0,     // Pixels or items to move per one mouse scroll. 0 to disable scrolling.
    scrollHijack: 300,   // Milliseconds since last wheel event after which it is acceptable to hijack global scroll.
    scrollTrap:   false, // Don't bubble scrolling when hitting scrolling limits.

[hamzabaig18]

Hi there, I am facing the same problem on laptop touchpad. Can you specifically write the option to enable scroll on touchpad.

Thanks! Hamza

[dannymichel]

i'd love to know the specific options for 2 finger trackpad scroll