Question

网站底部的最后一个div锁定到页面底部，不会让我在没有刷新的情况下向上滚动。清除超时无效。

我需要更改哪些内容才能解决此问题？

这是我的js：

function autoScrollTo(el){
    var sliderPx = document.getElementById('nav').style.top; 
    var sliderPos = sliderPx;
    var targetPos = document.getElementById(el).offsetTop;
    if(sliderPos < targetPos){
        scrollDown(el);
    } else {
        scrollUp(el)
    }
}

var scrollAmount = 0;
var distance = 38;
var speed = 16;
function  scrollDown(el){
    var offsetY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
    var timeLooper = setTimeout ('scrollDown(\''+el+'\')', speed);
    if(offsetY < targetY){
        scrollAmount = offsetY+distance;
        window.scroll(0, scrollAmount);
    } else {
        clearTimeout(timeLooper);   
    }
}

function  scrollUp(el){
    var currentY = window.pageYOffset;
    var targetY = document.getElementById(el).offsetTop;
    var looper = setTimeout ('scrollUp(\''+el+'\')', speed);
    if(currentY > targetY){
        scrollY = currentY-distance;
        window.scroll(0, scrollY);
    } else {
        clearTimeout(looper);   
    }
}

这是我的HTML：

<div id="nav">
    <ul>
        <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('services');">SERVICES</a></li>
        <li><a href="#" onclick="return false;" onmousedown="autoScrollTo('feed');">CONTACT</a></li>
    </ul>
    <div class="clearFix"></div>
</div><!--/nav-->

Answer 1

老实说，你应该重新考虑你的解决方案，使用JQuery（动画），并改变滚动逻辑，但是我改变了一些东西，并添加了一个标记，它可以捕获你的无限滚动...只是一个快速的解决方法，但严重的是，重新开始，或者你将不会有一个像样的跨浏览器滚动解决方案！

function autoScrollTo(el){
    console.log(el);
    var scrollPos = document.documentElement.scrollTop;
    var targetPos = document.getElementById(el).offsetTop;

    console.log(scrollPos + "," + targetPos);
    if(scrollPos < targetPos){
        scrollDown(el);
    } else {
        scrollUp(el)
    }
}

var scrollAmount = 0;
var distance = 38;
var speed = 16;

var lastPosition;

function  scrollDown(el){
    var offsetY = document.documentElement.scrollTop;
    var targetY = document.getElementById(el).offsetTop;
    var timeLooper = setTimeout ('scrollDown(\''+el+'\')', speed);

    if(offsetY < targetY && lastPosition != offsetY){
        console.log(offsetY + "," + targetY);
        scrollAmount = offsetY+distance;
        window.scroll(0, scrollAmount);

    } else {
        console.log("end down");
        clearTimeout(timeLooper);   
    }
    lastPosition = offsetY;
}

function  scrollUp(el){
    var currentY = document.documentElement.scrollTop;
    var targetY = document.getElementById(el).offsetTop;
    var looper = setTimeout ('scrollUp(\''+el+'\')', speed);
    if(currentY > targetY && lastPosition != currentY){
        scrollY = currentY-distance;
        window.scroll(0, scrollY);
    } else {
        console.log("end up");
        clearTimeout(looper);   
    }
    lastPosition = currentY;
}

返回false / clear超时不是为了滚动动画而行走

1 个答案: