List not displaying with few items about megalist

[lattmann]

Dear renaud88,

I have experienced the same issue and made some changes in the code. Please find my changes below.

The root cause of the issue is this.$scrollbar.before( this.$ul ); If we have only a few items and the scroll bar is not required it gets removed from the DOM. So, I have prepended the ul list to the main element instead. I have also made some event disabling if the scroll bar is inactive.

I have not tested the code on phones.

Best,
-zsolt

Index: megalist.js

--- megalist.js (revision 37)
+++ megalist.js (revision 38)

@@ -161,7 +161,9 @@
     },

     onTouchMove: function ( event ) {
-        
+        if (this.$scrollbar.active == false) {
+           return false;
+       }
         var newCoordinates = this.getInputCoordinates( event );
         var yDelta = this.inputCoordinates.y - newCoordinates.y;

@@ -196,7 +198,7 @@

         this.cleanupEventHandlers();

-        if ( !clickEvent ) {
+        if ( !clickEvent && this.$scrollbar.active) {
             this.scrollWithInertia();
         }
         else {
@@ -208,6 +210,9 @@
     },

     onMouseWheel: function ( event ) {
+       if (this.animating == false) {
+           return false;
+       }
         clearTimeout( this.cleanupTimeout );

         //only concerned about vertical scroll
@@ -381,7 +386,9 @@
             if ( ignoreScrollbar !== true ) {
                 this.updateScrollBar();
             }
-            this.$scrollbar.before( this.$ul );
+           this.animating = !ignoreScrollbar; // do not animate if there is no scroll bar
+           this.$el.prepend(this.$ul);
+            //this.$scrollbar.before( this.$ul ); // scroll bar may not exist
         }
     },

@@ -408,11 +415,13 @@
         if ((this.dataProvider.length * this.itemHeight) <= this.$el.height() ) {
             if ( parent.length > 0 ) {
                 this.$scrollbar.remove();
+               this.$scrollbar.active = false;
             }
         }
         else {
             if ( parent.length <= 0 ) {
                 this.$el.append( this.$scrollbar );
+               this.$scrollbar.active = true;
             }
             this.$scrollbar.css( "top", scrollPosition );
         }
@@ -441,6 +450,9 @@
     },

     scrollWithInertia: function() {
+       if (this.$scrollbar.active == false) {
+           return false;
+       }
         var friction = 0.97;

         //detect bounds and "snap back" if needed
@@ -476,6 +488,9 @@
     },

     snapToTop: function() {
+       if (this.$scrollbar.active == false) {
+           return false;
+       }
         var self = this;
         var snapRatio = 5;
         var targetPosition = 0;
@@ -495,6 +510,9 @@
     },

     snapToBottom: function() {
+       if (this.$scrollbar.active == false) {
+           return false;
+       }
         var self = this;
         var snapRatio = 5;

@@ -614,6 +632,9 @@
     },

     scrollbarTouchStart: function( event ) {
+       if (this.$scrollbar.active == false) {
+           return false;
+       }
         this.cleanupEventHandlers();
         this.scrollbarInputCoordinates = this.getInputCoordinates( event );

@@ -625,6 +646,9 @@
     },

     scrollbarTouchMove: function( event ) {
+       if (this.$scrollbar.active == false) {
+           return false;
+       }
         var newCoordinates = this.getInputCoordinates( event );
         var yDelta = this.scrollbarInputCoordinates.y - newCoordinates.y;

@@ -651,6 +675,9 @@
     },

     scrollbarTouchEnd: function( event ) {
+       if (this.$scrollbar.active == false) {
+           return false;
+       }
         this.cleanupEventHandlers();
         this.cleanupListItems();
         event.preventDefault();

[Vilinkamen]

This code is still not committed on Git? I had problems when having lists with few items too.

[renaud-dev]

Thx for the hack lattmann! (a bit late sorry)

[lattmann]

Dear renaud88,

I had the same issue and thought to share my solution/fix/hack, whatever you call it. I was not able to get it working for small lists without touching the JavaScript code. Otherwise this is a good library.

Hope that the author will fix it in the upcoming version.

Best,
-zsolt

PS: I did not change the code in the Git repository.

[Ning-Sun]

Dear @lattmann,

Your fix is great. The only thing I have question is about the code added in OnMouseWheel() function

   if (this.animating == false) {
       return false;
   }

I think this should be

   if (this.$scrollbar.active == false) {
      return false;
   }

Otherwise, onMouseWheel event is disabled after using scroll bar. Please let me know if I misunderstood your code.

Also, in setDataProvider() function, remove scrollbar if dataProvider.length == 0

Thank you very much.

[lattmann]

Dear Ning-Sun,

Good point. Thanks. I missed it. It should be this.$scrollbar.active == false.

I agree with the other comment too.

-lattmann