Horizontal Scroll cancels out Vertical touch scroll on OS devices :/

[devilamn]

I'm running the iScroll script but the problem comes in the form of trying to scroll vertically down the page when the iScroll is in view. Apparently you the OS scroll gets cancelled out if you try and scroll on the iScroll content. Has anyone else found this problem and does anyone know of a way to solve it?

Cheers

[Justin Avery]

I'm having a similar issue.  I want to have a horizontal scrolling menu at the top of the page, and have the remainder of the page scroll independently of this vertically.

[Adam Storr]

Have you found an answer to this? I'm also having the same issue.

[anusha kadambala]

Even i have the same issue. I have Vertical scroller inside snap view(i.e carousel). But somehow snap view is not working. Snap view is working as simple page. I want simple vertical scroller inside snap view. How to implement this. Below is my code what I implemented.

Below is my HTML:

<div id="content2">
       <div id="contEventList" style="overflow-x: hidden; overflow-y: hidden; ">
         <div id="mainList" style="-webkit-transition-property: -webkit-transform; -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px; -webkit-transform: translate3d(0px, 0px, 0px); -webkit-transition-duration: 0ms; ">
         <ul>
               <li>Part I</li>
               <li>
                    <div id="left">
                                <div class="lineBgb"></div>
                                    <div id="list" style="overflow-x: hidden; overflow-y: hidden; ">
                                            <ul id="ulList" style="-webkit-transition-property: -webkit-transform; -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px; -webkit-transform: translate3d(0px, 0px, 0px); -webkit-transition-duration: 0ms; ">
                                                        <li class="liActive">ABCD</li>
                                                           <li>ABCD</li>
                                                          <li><ANCD</li>
                                         </ul>
                                         <div id="loader2"></div>
                                           </div>
                                          <div class="vredbar2"></div>
                                         </div>
                        </li>
               <li>Part 3</li>
               </ul>
           </div>
            <div style="position: absolute; z-index: 100; width: 7px; bottom: 2px; top: 2px; right: 1px; pointer-events: none; -webkit-transition-property: opacity; -webkit-transition-duration: 0ms; overflow-x: hidden; overflow-y: hidden; -webkit-transition-delay: 0ms; opacity: 1; "><div style="position: absolute; z-index: 100; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgba(0, 0, 0, 0.496094); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgba(255, 255, 255, 0.898438); border-right-color: rgba(255, 255, 255, 0.898438); border-bottom-color: rgba(255, 255, 255, 0.898438); border-left-color: rgba(255, 255, 255, 0.898438); -webkit-background-clip: padding-box; -webkit-box-sizing: border-box; width: 100%; border-top-left-radius: 3px 3px; border-top-right-radius: 3px 3px; border-bottom-right-radius: 3px 3px; border-bottom-left-radius: 3px 3px; pointer-events: none; -webkit-transition-property: -webkit-transform; -webkit-transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); -webkit-transition-duration: 0ms; height: 8px; -webkit-transform: translate3d(0px, 470px, 0px); "></div>
          </div>
     </div>
</div>

Below is my JS:
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;

var mysroll_hor;

myScroll_hor = new iScroll('contEventList', {
                snap: true,
                momentum: false,
                hScrollbar: true
             });
            myScroll = new iScroll('list', {
                hScrollbar: false,
                vScrollbar: false,
                onScrollEnd: function () {
                   alert('hello');
                    }
            });

[David Webb]

Same issue here in 2015. I can't vertically scroll down the page in Safari/Chrome on iOS when I have an iScroll component near the top. I may have to mess around in the source code to get it to work properly...