
写了一个fullpage前端框架,可以很轻松创建的单页滑动网站,不依赖任何库。
这是一个简单的 DEMO:http://kisnows.com/fullpage-light.js/.
因为不知道还需要那些功能,所以发上来希望大家提提意见。
顺便请教一个问题,关于 chrome 开发工具的:
以前在开发工具的 js 文件上里面点右键,会出现 block 这个文件的选项,也就是说在 debug 的时候不会跳入被 block 的文件,很方便跳过那写引入的库或这个框架文件。
但是现在没有了,只能在设置里面手动去加,这样明显很麻烦,为什么 chrome 要这么做?
chrome 版本: 45.0.2454.85 m
1 emric 2015-09-13 20:29:30 +08:00 一直滚鼠标滚轴会出现问题. |
2 just44 2015-09-13 20:39:08 +08:00 滚动的时候页面一直在抽搐。。。 |
3 haiyang416 2015-09-13 20:39:09 +08:00 via Android 安卓平板不能点击超链接 |
6 kisnows OP @haiyang416 我只使用了最普通的 a 链接,不应该啊 |
7 haiyang416 2015-09-13 20:57:33 +08:00 via Android @kisnows 我的安卓手机也不行,试了 Firefox 和 Opera 。 |
8 ak47iej 2015-09-13 21:07:51 +08:00 滚动抽搐 +1 chrome 42 ,滚一下动一下没问题 问题是...我用滚轮是连续一直滚,然后就抽搐了 问题貌似是滚太多直接到底,然后 js 回顶部再滚,再到底... 呃,貌似描述的不太好.. |
9 TangMonk 2015-09-13 21:24:27 +08:00 滚动抽搐 +2 macbook, 触控板手势向下滑动 |
10 Starduster 2015-09-13 21:55:07 +08:00 和 9 楼相同, Mac ,触摸板滚动, chrome 力度大就没问题,力度小了就抽搐,而且会弹回去 |
11 kisnows OP @Starduster @ak47iej @TangMonk 因为我开了循环滚动,这样由于你们滚动速度过快,同时响应了 N 次,而且滚到最后一页的时候会自动回到第一页,所以看起来会抽搐。 看来我要加个限制,比如多少秒内只相应一次操作,这样应该就不会抽搐了。 |
12 kisnows OP @haiyang416 我找找问题,虽然不太能理解为什么 |
13 ljbha007 2015-09-13 23:24:59 +08:00 不能连续滚动而是松手才能到下一页 这一点体验不好 用 translate3d 做是很简单的 |
14 Kilerd 2015-09-13 23:34:52 +08:00 为什么不设置当前动作未结束时,拒绝(忽略)其他动作。 |
15 boro 2015-09-13 23:55:22 +08:00 滚动抽搐 +1 , 滑动不顺畅。 |
16 l12ab 2015-09-13 23:58:06 +08:00 PC, FIREFOX, 滚不动 |
17 moosoome 2015-09-14 02:16:29 +08:00 抽搐....大概是滚动未结束就接受了其他动作 |
18 kisnows OP |
19 kisnows OP @l12ab firefox 滚不动是我没有对 firefox 做兼容-_-,你可以试着用键盘控制下。接下来我会对 firefox 做兼容。 |
20 sarices 2015-09-14 09:23:38 +08:00 貌似鼠标滚动不是很顺畅 chrome ,有点抽搐,需要优化一下 |
21 learnshare 2015-09-14 09:46:58 +08:00 Demo 不能太丑 |
22 Busy 2015-09-14 10:07:35 +08:00 safari 触摸板滚动,极其颤抖。 |
23 kisnows OP @learnshare Demo 其实是在针对手机端的。要不提供个设计思路,毕竟我不是做设计的额,-_-。 |
24 mhtt 2015-09-14 13:16:31 +08:00 chrome 45 触板滚动,异常颤抖 |
25 akaayy 2015-09-14 18:28:02 +08:00 via Android 我觉得非常好 楼主继续加油! |
26 kisnows OP |
27 kisnows OP @haiyang416 你现在再试试,应该好了。 |
29 kisnows OP |
30 Kilerd 2015-09-14 21:51:15 +08:00 现在看上去起码可以用了,但是感觉还是怪怪的。 |
32 Starduster 2015-09-15 00:03:43 +08:00 那么现在的问题就是我轻轻一滚只要不在中途再按住触摸板他会一直滚到最下面,难道说就是这么设计的? |
33 kisnows OP 应该不会吧,我在我这边测了下,没有这个问题。我是 win 的本和触摸板 |
34 ccccccc 2015-09-15 09:19:09 +08:00 @kisnows mac 触摸板会有一个 '缓冲' 的行为, 具体表现是很多次触发滚动. 这个不是简单加条件限制可以组织的, 你可以参考一下另一个 fullPage 插件的做法. |
35 kisnows OP @ccccccc 我现在的做法是,在一次动作完成之前,都不会相应其它的动作。这样应该不会有问题,在页面还有滚动完成之前,它是不会触发任何动作的。 手头没有 mac ,不好测试-_- |
36 ccccccc 2015-09-15 10:37:52 +08:00 @kisnows 你现在这样的做法还是没办法阻止 mac 上多次滚动问题, 当你完成一个滚动动作时候, 事实上那个触摸板的滚动事件还在触发, 所以才有多次滚动问题. |
37 kisnows OP @ccccccc 滚动还在触发,是说手已经离开触摸板了,但是触摸事件还在触发吗?要是这样的话,我可能得考虑从一个方向入手了。 |
38 ccccccc 2015-09-15 11:30:57 +08:00 在 mac 上 window.Onscroll= function (e ) {console.log (e )} 然后轻轻滑动触摸板, console 输出下面 VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} VM127:2 Event {} |
41 kisnows OP @Starduster 现在应该没有这个问题了 |
44 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') } } } }) |
47 kisnows OP @ccccccc 看来我还是没有解决这个问题啊,( - )。我现在是这样的。 [:图片 1:] 其实的`page.isScrolling`是一个用来判断当前页面是否在滚动的参数。理论上再一次滑动(虽然 wheelEvent 会触发很多次)中只会触发一次,如果说现在是一次滑动走了好几张页面。那有可能是 mac 的触摸板有一个缓冲的过程,就是说即便你手里开了触摸板,但是事件还是触发? 我得想个其它方法了 |