第一个问题: 无法弄清楚为什么.animate线性在到达目的地时会减慢速度。 我错过了什么?
奇怪的是,从中间的pic向上移动它总是完美地工作(仅在那种情况下)。
第二个问题: 有没有办法在动画正在进行时禁止用户滚动?
[编辑] 我剪掉了图片,因此更容易调试 [/编辑]
onCreate
public static final String SELECTED_POSITION_KEY = "select_position";
private int mSelectedPosition;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mSelectedPosition = getIntent().getIntExtra(SELECTED_POSITION_KEY, default_value);
}
$(document).ready( function (){
var scrollCheck = 0;
var heightVal = window.innerHeight;
$(window).resize(function(){
window.scroll(0,0);
heightVal = window.innerHeight;
hControl1 = heightVal -1;
scrollCheck = 0;
});
var isScrolling = false;
window.addEventListener("scroll", throttleScroll, false);
function throttleScroll(e) {
if (isScrolling == false) {
window.requestAnimationFrame(function() {
scrolling(e);
isScrolling = false;
//console.log("Scrolling");
});
}
isScrolling = true;
}
document.addEventListener("DOMContentLoaded", scrolling, false);
function scrolling(e) {
var yValue = $(window).scrollTop();
//1st photo, scroll down
if ( yValue > 0 && scrollCheck === 0 ){
$('body').stop().animate({scrollTop:heightVal}, 700, 'linear');
if ( window.pageYOffset === heightVal ){
scrollCheck = 1;
//console.log(window.pageYOffset);
}
}//2nd photo, scroll up
else if( yValue < heightVal && scrollCheck === 1 ){
$('body').stop().animate({scrollTop:(-heightVal)}, 700, 'linear');
if ( window.pageYOffset === 0 ){
scrollCheck = 0;
}
}//2nd photo, scroll down
else if( yValue > heightVal && scrollCheck === 1 ){
$('body').stop().animate({scrollTop:(heightVal*2)}, 700, 'linear');
if ( window.pageYOffset === (heightVal*2) ){
scrollCheck = 2;
}
}//3rd photo, scroll up
else if( yValue < heightVal*2 && scrollCheck === 2){
$('body').stop().animate({scrollTop:(heightVal)}, 700, 'linear');
if ( window.pageYOffset === heightVal ){
scrollCheck = 1;
}
}
}//end of scrolling(e) funcion
}); //end of $(document).ready
答案 0 :(得分:0)
animate()
不会线性运行,因为每次触发scroll
事件时都会调用它。这是因为当你这样做时:
$("body").stop().animate({scrollTop: 0}, 700);
isScrolling = false;
计算机不等待动画完成以继续程序流程;相反,它启动动画并进行,立即将false
分配给isScrolling
变量。此外,您没有必要使用requestAnimationFrame
,并且导致isScrolling = false
分配在isScrolling = true
之后运行,几乎没有延迟 - 由于这些功能的asynchronous nature
这导致scroll
事件监听器每次触发时都会调用animate()
函数,因为isScrolling
永远不会true
。
可以通过等待animate()
回调将false
分配给isScrolling
,移除requestAnimationFrame
来电和isScrolling = false;
分配来解决问题。< / p>
最后一件事......
奇怪的是,从中间的pic向上移动它总是完美地工作(仅在那种情况下)。
不,它没有,但看起来是这样,因为您将其设置为{scrollTop: -heightVal}
,而它应该是{scrollTop: 0}
。
请注意,我非常强烈, HIGHLY 建议广泛重构函数和变量名称。除了你之外,没有人能在不到30分钟的时间内理解你的代码。
以上是上述所有更改的结果,包括更好的命名:
$(document).ready( function (){
var currentSection = 0;
var windowHeight = window.innerHeight;
$(window).resize(function(){
window.scroll(0,0);
windowHeight = window.innerHeight;
hControl1 = windowHeight -1;
currentSection = 0;
});
var isScrolling = false;
window.addEventListener("scroll", scrollSnappingController, false);
function scrollSnappingController(e) {
if (isScrolling === false) {
snapScrollToNextSection(e);
console.log("first")
isScrolling = true;
console.log("second")
}
}
function scrollEnded () {
isScrolling = false;
}
document.addEventListener("DOMContentLoaded", snapScrollToNextSection, false);
var section1 = $("#section1");
var section2 = $("#section2");
var section3 = $("#section3");
function snapScrollToNextSection(e) {
var scrollPosition = $(window).scrollTop();
//1st photo goin down
if ( scrollPosition > 0 && currentSection === 0 ){
$('body').stop().animate({scrollTop: windowHeight}, 700, 'linear', scrollEnded);
if ( scrollPosition === windowHeight ){
currentSection = 1;
}
}
else if( scrollPosition < windowHeight && currentSection === 1 ){
$('body').stop().animate({scrollTop:(0)}, 700, 'linear', scrollEnded);
if ( scrollPosition === 0 ){
currentSection = 0;
}
}
else if( scrollPosition > windowHeight && currentSection === 1 ){
$('body').stop().animate({scrollTop:(windowHeight*2)}, 700, 'linear', scrollEnded);
if ( scrollPosition === (windowHeight*2) ){
currentSection = 2;
}
}
else if( scrollPosition < windowHeight*2 && currentSection === 2){
$('body').stop().animate({scrollTop:(windowHeight)}, 700, 'linear', scrollEnded);
if ( scrollPosition === windowHeight ){
currentSection = 1;
}
}
}
});
html,body{
margin: 0;
height: 100%;
width: 100%;
}
img{
display: block;
height:100%;
width:100%;
margin: 0;
padding:0;
}
#section1,#section2,#section3{
height: 100%;
width: 100%;
vertical-align: top;
}
#section1{
background-color: grey;
}
#section2{
background-color: green;
}
#section3{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='section1'></div>
<div id='section2'></div>
<div id='section3'></div>