j查询整页过渡滚动
jQuery Full Page transition scroll
所以我想用jQuery实现一个完整的页面过渡滚动。我知道有这方面的插件,但我需要一个自定义代码。
//new script
<script>
$(document).ready(function(){
// http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
/* $(window).scroll(function(){
}); */
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
console.log('down');
if (($(this).scrollTop() >940) && ($(this).scrollTop() <1000)){
disableScroll();
$('html, body').animate({ scrollTop: $(".bg1").offset().top}, 2000);
enableScroll();
}
if ($(this).scrollTop() >1548){
disableScroll();
$('html, body').animate({ scrollTop: $(".bg2").offset().top}, 2000);
enableScroll();
}
} else {
// upscroll code
console.log('up');
/* if ($(this).scrollTop() >1548){
disableScroll();
$('html, body').animate({ scrollTop: $(".bg").offset().top}, 2000);
enableScroll();
} */
}
lastScrollTop = st;
});
}); //document.ready
</script>
这是我的剧本。它检查滚动是向上还是向下,然后从指定的像素开始过渡。开端很好。第一次转变正在发生。但是,在那之后,无论我向上还是向下滚动,它总是会回到 bg1 的位置。如果我非常强烈地滚动,有时会滚动到 bg2。我的代码有什么问题?
这是一个工作代码,其中包含注释和我使用的来源。
//$(document).ready(function(){ //disables all the scrolling
// $('body,html').css('overflow', 'hidden');
// });
// http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
//http://stackoverflow.com/questions/33838956/jquery-full-page-scroll-without-plugin
var currentLocation = 'firstPage';
// No need to set these inside the event listener since they are always the same.
var firstHeight = $('#firstPage').offset().top,
secondHeight = $('#secondPage').offset().top,
thirdHeight = $('#thirdPage').offset().top,
fourthHeight = $('#fourthPage').offset().top,
fifthHeight = $('#fifthPage').offset().top,
sixthHeight = $('#sixthPage').offset().top,
seventhHeight = $('#seventhPage').offset().top,
eightHeight = $('#eightPage').offset().top,
ninthHeight = $('#ninthPage').offset().top;
// Helper so we can check if the scroll is triggered by user or by animation.
var autoScrolling = false;
$(document).scroll(function(e){
var scrolled = $(window).scrollTop();
// Only check if the user scrolled
if (!autoScrolling) {
if (scrolled > 1 && currentLocation == 'firstPage') {
scrollPage(secondHeight, 'secondPage');
}
else if (scrolled > secondHeight + 1 && currentLocation == 'secondPage') {
scrollPage(thirdHeight, 'thirdPage');
}
else if (scrolled > thirdHeight + 1 && currentLocation == 'thirdPage') {
scrollPage(fourthHeight, 'fourthPage');
}
else if (scrolled > fourthHeight + 1 && currentLocation == 'fourthPage') {
scrollPage(fifthHeight, 'fifthPage');
}
else if (scrolled > fifthHeight + 1 && currentLocation == 'fifthPage') {
scrollPage(sixthHeight, 'sixthPage');
}
else if (scrolled > sixthHeight + 1 && currentLocation == 'sixthPage') {
scrollPage(seventhHeight, 'seventhPage');
}
else if (scrolled > seventhHeight + 1 && currentLocation == 'seventhPage') {
scrollPage(eightHeight, 'eightPage');
}
else if (scrolled > eightHeight + 1 && currentLocation == 'eightPage') {
scrollPage(ninthHeight, 'ninthPage');
}
else if (scrolled < ninthHeight - 1 && currentLocation == 'ninthPage') {
scrollPage(eightHeight, 'eightPage');
}
else if (scrolled < eightHeight - 1 && currentLocation == 'eightPage') {
scrollPage(seventhHeight, 'seventhPage');
}
else if (scrolled < seventhHeight - 1 && currentLocation == 'seventhPage') {
scrollPage(sixthHeight, 'sixthPage');
}
else if (scrolled < sixthHeight - 1 && currentLocation == 'sixthPage') {
scrollPage(fifthHeight, 'fifthPage');
}
else if (scrolled < fifthHeight - 1 && currentLocation == 'fifthPage') {
scrollPage(fourthHeight, 'fourthPage');
}
else if (scrolled < fourthHeight - 1 && currentLocation == 'fourthPage') {
scrollPage(thirdHeight, 'thirdPage');
}
else if (scrolled < thirdHeight - 1 && currentLocation == 'thirdPage') {
scrollPage(secondHeight, 'secondPage');
}
else if (scrolled < secondHeight - 1 && currentLocation == 'secondPage') {
scrollPage(firstHeight, 'firstPage');
}
}//autoScrolling IF
// Since they all have the same animation, you can avoid repetition
function scrollPage(nextHeight, page) {
currentLocation = page;
// At this point, the page will start scrolling by the animation
// So we switch this var so the listener does not trigger all the if/else
autoScrolling = true;
disableScroll();
$('body,html').animate({scrollTop:nextHeight}, 500, function () {
// Once the animation is over, we can reset the helper.
// Now it is back to detecting user scroll.
autoScrolling = false;
enableScroll();
});
}
//$('h1').html(scrolled);
//$('h1').append("/" + secondHeight);
//$('h1').append("/" + thirdHeight);
})//document.ready
相关文章:
- j查询向下滚动到特定段落
- JQuery查询滚动长度/高度
- j查询整页过渡滚动
- j查询滚动顶部麻烦
- j查询星级导致页面滚动
- j查询平滑滚动到新页面链接
- 使用媒体查询在较小的屏幕上仅滚动模态的距离
- j查询平滑滚动到锚点
- 更改窗口.基于媒体查询的滚动位置
- j查询在scrollTop()调用后重置窗口滚动
- j查询基于滚动的淡入和淡出
- j查询页面 每次向下滚动时,在单个页面中按键按下
- 带滚动条更改的 Chrome 媒体查询
- j查询单页滚动不起作用
- j查询窗口滚动事件.每滚动 XX 个像素
- 使用查询的水平图像滚动
- j通过箭头查询可滚动的ul(当到达列表的顶部或底部时删除箭头)
- 通过AngularJS中的按钮点击/滚动来增加Mongoose查询限制
- 由于滚动冲突,JQuery在单击或模糊、停止或终止功能时进行查询
- 实时查询和检测滚动的位置