写了一个简单的 fullpage 框架,希望大家提提意见

2015-09-13 20:14:19 +08:00
 kisnows

写了一个fullpage前端框架,可以很轻松创建的单页滑动网站,不依赖任何库。
这是一个简单的 DEMO:http://kisnows.com/fullpage-light.js/.

因为不知道还需要那些功能,所以发上来希望大家提提意见。

顺便请教一个问题,关于 chrome 开发工具的:
以前在开发工具的 js 文件上里面点右键,会出现 block 这个文件的选项,也就是说在 debug 的时候不会跳入被 block 的文件,很方便跳过那写引入的库或这个框架文件。
但是现在没有了,只能在设置里面手动去加,这样明显很麻烦,为什么 chrome 要这么做?
chrome 版本: 45.0.2454.85 m

4218 次点击
所在节点    问与答
51 条回复
kisnows
2015-09-15 23:31:20 +08:00
@Starduster 现在应该没有这个问题了
kisnows
2015-09-15 23:32:49 +08:00
@Kilerd 之前没考虑到限制 现在加上了 谢谢意见
kisnows
2015-09-15 23:33:51 +08:00
@akaayy 谢谢鼓励
ccccccc
2015-09-16 09:47:12 +08:00
@kisnows 在 mac 上触摸板上多次滚动还是有问题, 下面代码是另一个 fullpage 插件的做法

// https://github.com/alvarotrigo/fullPage.js
// Gets the average of the last `number` elements of the given array.
function getAverage (elements, number ) {
var sum = 0;

//taking `number` elements from the end to make the average, if there are not enought, 1
var lastElements = elements.slice (Math.max (elements.length - number, 1 ));

for (var i = 0; i < lastElements.length; i++) {
sum = sum + lastElements[i]
}

return Math.ceil (sum/number );
}

var prevtime = new Date ().getTime ();
$(document ).on ('mousewheel wheel DOMMouseScroll', function (e ) {
e.preventDefault ()

var curtime = new Date ().getTime ();

var value = e.wheelDelta || -e.deltaY || -e.detail;
var delta = Math.max (-1, Math.min (1, value ));

//Limiting the array to 150 (lets not waste memory!)
if (scrollings.length > 149 ) {
scrollings.shift ()
}

//keeping record of the previous scrollings
scrollings.push (Math.abs (value ))

//time difference between the last scroll and the current one
var timeDiff = curtime-prevtime;
prevtime = curtime;

//haven't they scrolled in a while?
//(enough to be consider a different scrolling action to scroll another section )
if (timeDiff > 200 ) {
//emptying the array, we dont care about old scrollings for our averages
scrollings = [];
}

if (canScroll ) {
var averageEnd = getAverage (scrollings, 10 );
var averageMiddle = getAverage (scrollings, 70 );
var isAccelerating = averageEnd >= averageMiddle;

//to avoid double swipes...
if (isAccelerating ) {
//scrolling down?
if (delta < 0 ) {
hash ('down')

//scrolling up?
} else {
hash ('up')
}
}
}
})
kisnows
2015-09-16 10:11:00 +08:00
@ccccccc 那现在的问题是什么能描述一下吗,还是跟之前一样吗?
ccccccc
2015-09-16 10:54:48 +08:00
@kisnows 就是轻轻滑动一下触摸板,然后页面会滚动几个页面
kisnows
2015-09-16 11:15:29 +08:00
@ccccccc 看来我还是没有解决这个问题啊,( ▼-▼ )。我现在是这样的。
[:图片 1:]
其实的`page.isScrolling`是一个用来判断当前页面是否在滚动的参数。理论上再一次滑动(虽然 wheelEvent 会触发很多次)中只会触发一次,如果说现在是一次滑动走了好几张页面。那有可能是 mac 的触摸板有一个缓冲的过程,就是说即便你手里开了触摸板,但是事件还是触发?
我得想个其它方法了
kisnows
2015-09-16 11:16:37 +08:00

@ccccccc
图好像没上传上去
ccccccc
2015-09-16 11:24:53 +08:00
@kisnows 是的,手离开触摸板事件还在触发,这个就是 '缓冲' 的过程
kisnows
2015-09-16 11:32:01 +08:00
@ccccccc 还真是这样,我还得想想怎么弄。
kisnows
2015-09-18 17:08:30 +08:00
@l12ab 现在应该可以滚动了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/220416

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX