List not displaying with few items

[renaud-dev]

Hello!

I have played a bit with your jQuery plugin and it's really great one! Both working well on mobile devices and desktop browsers! Thank you for the good work!

However, I’m facing an issue when my list contains only a few items: for instance, in the provided sample "01 - simple inline data.html", if we have only 3 items instead of 50 the list doesn't show anything; it then seems to be empty while it's actually not.

Do you have any idea how i could try to fix the problem?

Thank you in advance!

[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