CODEWITHSUNDEEP
javascriptjquery
Glenn Curtis
Glenn Curtis

Reputation: 659

Scrolling div tags on touch?

Ok, I have got a number div tags, within a section tag and on selected menu button clicks scrolls though to that selected div area.

Each div area has a translate3d css, move each div out one other the other. Then the code fires on a 'click' event to move the div tag into the browser window.

CSS code 

#Area1 {
    position: absolute;
    top: 0px;
    z-index: 10;
    border-left:10px solid #FFFFFF;
    width: 100%;
    height: 100%;
    padding-left: 10%;
    padding-right: 10%;
    background-color: #66cc33;
    -moz-transform:translate3d(100%,0%,0px) skew(16deg, 0);
    -webkit-transform: translate3d(100%,0%,0px) skew(16deg, 0);
}

Area2 code would be the same, but set at 200%. This div tag is set within a div wrapper set with position relative on it.

Jquery code the moves the div

  $( "#AreaOne" ).animate({left: "0%"}, 1000, 'easeInOutQuad');
  $( "#AreaTwo" ).delay(100).animate({left: "0%"}, 1000, 'easeInOutQuad');

This all works fine. No problems at all. But I want to be able to swipe through these divs as well. But is does not do this on my iphone I am testing on. Now I think this is because I use an click event function? I don't really want to change the code I have made, mainly because it works fine.

Now I tried using touchwipe on the div, but that did not work, not sure if I call it in right or not :).

Just wanted to know if there was a quick a simple way of making a div scroll on touch?

Many thanks,

Glenn.

PS. Sorry if I have not explained myself well. If its not clear, please let me know and I will change my question.

Upvotes: 2

Views: 9839

Answers (1)

Scott Phillips
Scott Phillips

Reputation: 177

Have you tried adding the web-kit specific declaration?

overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch; /* momentum scrolling, iOS Safari only*/

More depth here: http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

Also see the documentation for -webkit-overflow-scrolling.

Upvotes: 1

Related Questions