使用 Iscroll 重置自动滚动间隔
Resetting autoscroll intervals with Iscroll
我正在尝试使用 iScrolljs 构建带有轮播的页面。轮播的位置应该跟随我在视频中的位置。这与问题并不相关,但我认为我应该提供尽可能多的信息。
自动滚动有效,但我也希望用户能够自己滚动。问题是,当您现在每次滚动调用间隔时,旋转木马都会滚动到上一个位置。我正在尝试使用清除间隔并重置它们,但它似乎不起作用。这是我的:
video.onplay = function(){
myScroll = new IScroll('#carWrapper',{
scrollX: true,
scrollY: false,
momentum: false,
click:true,
mouseWheel:true,
tap: true,
keyBindings: true
});
scroll();
};
function checkMoved(){
if(document.getElementById('carWrapper')){
if(!scroller.moved){
var scrollPos = (video.currentTime/video.duration)*4800;
myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic);
}
}
if(myScroll.moved){
clearInterval(scrollInterval);
myScroll.moved = false;
setTimeout(scroll(),10000);
}
}
function scroll(){
scrollInterval = setInterval(checkMoved,5000);
}
提前致谢!
我认为浏览器没有看到 scrollInterval 函数 checkMoved()
你必须全局声明它然后在滚动函数中分配它
var scrollInterval;
video.onplay = function () {
myScroll = new IScroll('#carWrapper', {
scrollX: true,
scrollY: false,
momentum: false,
click: true,
mouseWheel: true,
tap: true,
keyBindings: true
});
scroll();
};
function checkMoved() {
if (document.getElementById('carWrapper')) {
if (!scroller.moved) {
var scrollPos = (video.currentTime / video.duration) * 4800;
myScroll.scrollTo(-scrollPos, 0, 1000, IScroll.utils.ease.elastic);
}
}
if (myScroll.moved) {
clearInterval(scrollInterval);
myScroll.moved = false;
setTimeout(scroll(), 10000);
}
}
function scroll() {
scrollInterval = setInterval(checkMoved, 5000);
}
我稍微更改了代码并使其正常运行。
video.onplay = function(){
myScroll = new IScroll('#carWrapper',{
scrollX: true,
scrollY: false,
momentum: false,
click:true,
mouseWheel:true,
tap: true,
keyBindings: true
});
scrollInterval = setInterval(function(){
if(myScroll.moved){
resetInterval();
myScroll.moved = false;
}
else if(document.getElementById('carWrapper')){
if(!scroller.moved){
var scrollPos = (video.currentTime/video.duration)*4800;
myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic);
}
}
},5000);
};
function resetInterval(){
clearInterval(scrollInterval);
scrollTimeout = setTimeout(function(){
scrollInterval = setInterval(function(){
if(myScroll.moved){
resetInterval();
myScroll.moved = false;
}
else if(document.getElementById('carWrapper')){
if(!scroller.moved){
var scrollPos = (video.currentTime/video.duration)*4800;
myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic);
}
}
},5000);
},10000);
}
它可能不是最干净的代码,但我很高兴它能工作。
我正在尝试使用 iScrolljs 构建带有轮播的页面。轮播的位置应该跟随我在视频中的位置。这与问题并不相关,但我认为我应该提供尽可能多的信息。
自动滚动有效,但我也希望用户能够自己滚动。问题是,当您现在每次滚动调用间隔时,旋转木马都会滚动到上一个位置。我正在尝试使用清除间隔并重置它们,但它似乎不起作用。这是我的:
video.onplay = function(){
myScroll = new IScroll('#carWrapper',{
scrollX: true,
scrollY: false,
momentum: false,
click:true,
mouseWheel:true,
tap: true,
keyBindings: true
});
scroll();
};
function checkMoved(){
if(document.getElementById('carWrapper')){
if(!scroller.moved){
var scrollPos = (video.currentTime/video.duration)*4800;
myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic);
}
}
if(myScroll.moved){
clearInterval(scrollInterval);
myScroll.moved = false;
setTimeout(scroll(),10000);
}
}
function scroll(){
scrollInterval = setInterval(checkMoved,5000);
}
提前致谢!
我认为浏览器没有看到 scrollInterval 函数 checkMoved() 你必须全局声明它然后在滚动函数中分配它
var scrollInterval;
video.onplay = function () {
myScroll = new IScroll('#carWrapper', {
scrollX: true,
scrollY: false,
momentum: false,
click: true,
mouseWheel: true,
tap: true,
keyBindings: true
});
scroll();
};
function checkMoved() {
if (document.getElementById('carWrapper')) {
if (!scroller.moved) {
var scrollPos = (video.currentTime / video.duration) * 4800;
myScroll.scrollTo(-scrollPos, 0, 1000, IScroll.utils.ease.elastic);
}
}
if (myScroll.moved) {
clearInterval(scrollInterval);
myScroll.moved = false;
setTimeout(scroll(), 10000);
}
}
function scroll() {
scrollInterval = setInterval(checkMoved, 5000);
}
我稍微更改了代码并使其正常运行。
video.onplay = function(){
myScroll = new IScroll('#carWrapper',{
scrollX: true,
scrollY: false,
momentum: false,
click:true,
mouseWheel:true,
tap: true,
keyBindings: true
});
scrollInterval = setInterval(function(){
if(myScroll.moved){
resetInterval();
myScroll.moved = false;
}
else if(document.getElementById('carWrapper')){
if(!scroller.moved){
var scrollPos = (video.currentTime/video.duration)*4800;
myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic);
}
}
},5000);
};
function resetInterval(){
clearInterval(scrollInterval);
scrollTimeout = setTimeout(function(){
scrollInterval = setInterval(function(){
if(myScroll.moved){
resetInterval();
myScroll.moved = false;
}
else if(document.getElementById('carWrapper')){
if(!scroller.moved){
var scrollPos = (video.currentTime/video.duration)*4800;
myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic);
}
}
},5000);
},10000);
}
它可能不是最干净的代码,但我很高兴它能工作。