jQuery Forum

Each list item is horizontally draggable, which works fine, but on multi-touch it is hard to scroll because only the body ( the white area in the diagram ) can trigger scrolling.

Although the list items are horizontally draggable, when you move a finger down on the list-items, it interprets that as a horizontal drag because rarely are those vertical flicks 100% straight.

I am using jQuery UI for the draggable interaction.

How can I make this page vertically scrollable from anywhere on the page like a static page on a multi-touch device is?

1.             var headerPulledDown = false;
2. var headerCanvas = null;
3. var vh = $(window).height();
4. $(window).on('resize', function(){
5. vh=$(window).height();
6. if(headerPulledDown === false){
7. if(vh <= 636){
8. $('#pseudobody').css('top', -216);
9. $(document).css('height', $(document).height() - 216);
10. $('#pullDownTab').fadeIn();
11. headerCanvas = false;
12. $('#pseudobody').draggable({
13. axis:'y',
14. handle:'#pullDownTab',
15. drag: function(event, ui){
16. if(ui.position.top < -216 || ui.position.top > 0){
17. return false;
18. }
19. if(ui.position.top >= -42){
20. $(this).animate({top:'0'});
21. $('#pullDownTab').fadeOut();
22. headerPulledDown = true;
23. headerCanvas = true;
24. return false;
25. }
26. }
27. });
28. }
29. else if(vh > 636){
30. $('#pseudobody').css('top', '0');
31. $('#pullDownTab').fadeOut();
32. headerCanvas = true;
33. $('#pseudobody').draggable({
34. drag: function(){
35. return false;
36. }
37. });
38. }
39. }
40. });
41. if(vh <= 636){
42. $('#pseudobody').animate({top:'-216'});
43. $(document).css('height', $(document).height() - 216);
44. $('#pullDownTab').fadeIn();
45. headerCanvas = false;
46. $('#pseudobody').draggable({
47. axis:'y',
48. handle:'#pullDownTab',
49. drag: function(event, ui){
50. if(ui.position.top < -216 || ui.position.top > 0){
51. return false;
52. }
53. if(ui.position.top >= -42){
54. $(this).animate({top:'0'});
55. $('#pullDownTab').fadeOut();
56. headerPulledDown = true;
57. headerCanvas = true;
58. return false;
59. }
60. }
61. });
62. }
63. else if(vh > 636){
64. $('#pseudobody').animate({top:'0'});
65. $('#pullDownTab').fadeOut();
66. $('#pseudobody').draggable({
67. drag: function(){
68. return false;
69. }
70. });
71. }
72. $('#pullDownTab, header, #header, [role="banner"]').on('click', function(event){
73. if(headerCanvas === true){
74. $('#pseudobody').animate({top:'-216'});
75. $(document).css('height', $(document).height() - 216);
76. headerCanvas = false;
77. }
78. else if(headerCanvas === false){
79. $('#pseudobody').animate({top:'0'});
80. $('#pullDownTab').fadeOut();
81. headerCanvas = true;
82. }
83. });

1. $(document).ready(function(){
2.       function scrollFunc(e) {
3.             if ( typeof scrollFunc.x == 'undefined' ) {
4. scrollFunc.x=window.pageXOffset;
5. scrollFunc.y=window.pageYOffset;
6. }
7. var diffX=scrollFunc.x-window.pageXOffset;
8. var diffY=scrollFunc.y-window.pageYOffset;
9. 
   
10. if(diffX<0){
11.             // Scroll right
12. }
13. else if(diffX>0){
14.       // Scroll left
15. }
16. else if(diffY<0){
17.       // Scroll down
18.       $('#topNav').fadeIn();
19. }
20. else if(diffY>0){
21. // Scroll up
22. if(document.body.scrollTop === 0){
23. $('#topNav').fadeOut();
24. }
25. }
26. else{
27.       // First scroll event
28.       $('#topNav').css('position','fixed').show().fadeIn();
29. }
30. scrollFunc.x=window.pageXOffset;
31. scrollFunc.y=window.pageYOffset;
32. }
33. window.onscroll=scrollFunc;
34. });

1. $(document).ready(function(){
2.        var input = $('.ac-container input');
3.        input.bind('tap click', function() {
4.               var me = $(this).siblings('article');
5.               if(!me.is(':animated')) {
6.                           me.slideDown().parent()
7.                           .siblings().children('article').slideUp();
8.                 }
9.                });
10. });                                                                                                                                         

1. <section>
2.       <div>
3.             <input type="checkbox" />
4.            <label>1</label>
5.             <article>
6.                   <p> Content...</p>
7.             <article>
8.       </div>
9. </section>
10. <section>
11.       <div>
12.             <input type="checkbox" />
13.            <label>2</label>
14.             <article>
15.                   <p> Content 2...</p>
16.             <article>
17.       </div>
18. </section>
19. <section>
20.       <div>
21.             <input type="checkbox" />
22.            <label>3</label>
23.             <article>
24.                   <p> Content 3...</p>
25.             <article>
26.       </div>
27. </section>