Comments (6)
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();
from megalist.
This code is still not committed on Git? I had problems when having lists with few items too.
from megalist.
Thx for the hack lattmann! (a bit late sorry)
from megalist.
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.
from megalist.
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.
from megalist.
Dear Ning-Sun,
Good point. Thanks. I missed it. It should be this.$scrollbar.active == false.
I agree with the other comment too.
-lattmann
from megalist.
Related Issues (8)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from megalist.