JQUERY滚动条整屏翻页的问题

Question

实现方法不难,首先计算浏览器的高度,
然后监听滚轮事件,然后使用scrollTo方法控制滚动条就行了.
示例代码如下:var absHeight = document.documentElement.clientHeight;
function scrollDown(){
    scrollTo(0, scrollTop + absHeight);
}
function scrollUp(){
  scrollTo(0, scrollTop - absHeight);
}

Answer 1

上面代码有点问题,修改后如下var absHeight = document.documentElement.clientHeight;
function scrollDown(){
    scrollTo(0, document.documentElement.scrollTop + absHeight);
}
function scrollUp(){
  scrollTo(0, document.documentElement.scrollTop - absHeight);
}

Answer 2

http://www.apple.com/cn/iphone-5s/类似苹果这个网页，一翻就是一整页

Answer 3

可问题是如何进行监听，因为之前已经设置了监听鼠标中键来翻页，如果通过SCROLL事件监听那么会有冲突（因为通过鼠标中键翻页也会触发SCROLL事件，而且拖动滚动条翻页时候在鼠标点下去就自动触发SCROLL事件，而不是在拖动完毕放下鼠标后才触发）

Answer 4

可问题是如何进行监听，因为之前已经设置了监听鼠标中键来翻页，如果通过SCROLL事件监听那么会有冲突（因为通过鼠标中键翻页也会触发SCROLL事件，而且拖动滚动条翻页时候在鼠标点下去就自动触发SCROLL事件，而不是在拖动完毕放下鼠标后才触发）监听鼠标中建的滚动状态就可以了.事件发生时使用代码[event.preventDefault();]阻止默认动作发生(这样就不会产生scroll事件了)。
然后判断滚轮向下或向上嗲用对应的scrollDown或scrollUp；

Answer 5

可问题是如何进行监听，因为之前已经设置了监听鼠标中键来翻页，如果通过SCROLL事件监听那么会有冲突（因为通过鼠标中键翻页也会触发SCROLL事件，而且拖动滚动条翻页时候在鼠标点下去就自动触发SCROLL事件，而不是在拖动完毕放下鼠标后才触发）监听鼠标中建的滚动状态就可以了.事件发生时使用代码[event.preventDefault();]阻止默认动作发生(这样就不会产生scroll事件了)。
然后判断滚轮向下或向上嗲用对应的scrollDown或scrollUp；
我使用的是jquery.mousewheel插件进行监听的：
$('html,body').bind('mousewheel', function (event, delta, deltaX, deltaY) {
                event.preventDefault();                
                if (scrolling == false) {                    
                    scrolling = true;                    
                    if (delta == -1 && scroll_num + 1 <= num) { scroll_num++; }
                    else if (delta == 1 && scroll_num - 1 > 0) { scroll_num--; }
                    $("html,body").animate({ scrollLeft: (scroll_num - 1) * $(window).width() }, 1000, function () { scrolling = false; });
                }
            });
scrolling是防止屏幕滑动的时候鼠标中间滚动再给新的指令，scroll_num是控制滑到第几个屏幕
可这样的代码只解决了鼠标滚动翻页的问题，依旧无法解决拖动滚动条翻页的问题

Answer 6

他的页面中把body的overflow-y设置为hidden了，所以没有滚动条。body {
position: absolute; 
top: 0; 
right: 0; 
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
html, body {
overflow-y: hidden;
min-width: 1024px;
-webkit-transition: opacity 400ms;
-moz-transition: opacity 400ms;
transition: opacity 400ms;
}

Answer 7

可以用这个插件
http://www.jq22.com/jquery-info465