Implementing scrollable sub-section

[slavafomin]

Hello!

Thank you for this great library!

However, I'm trying to implement scrollable sub-sections and encountering some weird behavior.

Right now, I have a scrollable div (overflow: auto;) on the last page of the snapscroll. I'm trying to make it scrollable by means of mousewheel. In order to solve this I need to resolve conflict between snapscroll mousewheel events and this local scrollable element.

I've tried the following approaches:

1). Using ignore-wheel-class option. However, this appears to not work at all. I'm setting data-ignore-wheel-class to the class name of my scrollable element, but when I place mouse pointer over the element and use the mousewheel the snapscroll is still capturing the events. Nothing changes even if you click inside of the element. Is this function broken?

2). I've added my own directive, which captures mousewheel events of my scrollable element and prevents their upward propagation to the snapscroll. It works, snapscroll is ignoring the scrolling, but the element is not scrolling nevertheless. However, when I click on the element it starts to scroll just fine. Then, if I navigate to the other page of the snapscroll and then return to the page with my element it's not scrolling again, even if I click inside of it. In order to make it work again I have to click outside of it for some reason.

— What could be causing this weird behavior? How do I make it work properly?

I would highly appreciate any suggestions, thank you!

[joelmukuthu]

Hi! Sorry for the late reply. The ignore-wheel-class option does indeed work, but the catch is that it must be on the children elements of the scrollable element, reason being that DOM events bubble from the absolute child elements.

<div snapscroll ignore-wheel-class='ignore-snapscroll'>
  <div class='snapscroll-child'></div>
  <div class='snapscroll-child'>
    <div class='some-scrollable-element' style='height: 50px; overflow: auto;'>
      <div class='some-inner-child ignore-snapscroll' style='height: 100px;'></div>
      <div class='some-other-inner-child ignore-snapscroll' style='height: 200px;'></div>
    </div>
  </div>
  <div class='snapscroll-child'></div>
  <div class='snapscroll-child'></div>
</div>

Note where the ignore-snapscroll class goes. Let me know if this helps :)

And to ensure that whole element is ignored, also add the ignore-snapscroll class to the parent element (in this case div.some-scrollable-element) so that if, for instance, the mouse pointer is placed over the scrollbars when the user uses the wheel, those events will still be ignored.