flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

more experimenting...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-07-16 23:51:28 +03:00
parent 245429db3e
commit 18723d5717
1 changed files with 11 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui (gen4)/experiments/native-scroll-ribbon-infinite.html
View File

@ -2,25 +2,6 @@
<html> <html>
<!-- <!--
//--------------------------------------------------------------------- //---------------------------------------------------------------------
// Experiment: use native scroll for ribbons and view...
// Factors:
// + the browser will do all the heavy lifting and do it faster
// than we can ever hope to do it in JS (assumption)
// - will require us to add an extra container per ribbon
//
// Experiment result:
// - more uniform and fast across browsers
// (except FF - can't disable scrollbars, need to cheat)
// - less controllable (inertia, gestures, ...)
// - is affected by scaling in a bad way - paralax...
//
// Conclusion:
// - this again brings us to using code to control the scroll
// which in turn defeats the original purpose of avoiding
// extra complexity...
//
// See:
// experiments/native-scroll-ribbon.html
// //
--> -->
@ -120,6 +101,7 @@
.ribbon-container { .ribbon-container {
position: relative; position: relative;
display: block;
height: 120px; height: 120px;
width: 100%; width: 100%;
@ -300,13 +282,20 @@ var setup = function(){
'margin-left': -W/2, 'margin-left': -W/2,
'margin-top': -H/2, 'margin-top': -H/2,
}, 0) }, 0)
// XXX make this generic...
.scroll(function(){ .scroll(function(){
var sh = this.scrollHeight var sh = this.scrollHeight
var st = this.scrollTop var st = this.scrollTop
// XXX for some reason removing/adding items from/to // XXX for some reason removing/adding items from/to
// the top does not require compensating here... // the top does not require compensating here...
// ...need to re-read my CSS ;) // ...it appears that if scrollTop is more than
// the removed height then element positions do
// not change...
// - chrome only???
// ...does not seam to work on other browsers
// - vertical scroll only???
// ...can't repeat for horizontal scroll
// top limit... // top limit...
if( st < threshold ){ if( st < threshold ){
@ -315,6 +304,7 @@ var setup = function(){
// add ribbon... // add ribbon...
if(n > 0){ if(n > 0){
// XXX compesate...
ribbon_set.prepend(makeRibbon(--n)) ribbon_set.prepend(makeRibbon(--n))
// remove ribbon from bottom... // remove ribbon from bottom...
@ -333,6 +323,7 @@ var setup = function(){
// remove ribon from top... // remove ribon from top...
if(c.length > ribbon_count){ if(c.length > ribbon_count){
// XXX compesate...
c[0].remove() c[0].remove()
} }
} }