在滚动时停止 Effect.ScrollTo() ？

发布于 2024-07-14 23:34:23 字数 141 浏览 7 评论 0原文

是的，基本上我有这个：

Effect.ScrollTo("bottom", { duration: 5.0 });

所以我想要的是在它滚动时停止这种效果，只要我想。

有什么帮助吗？

原文

Yeah, basically I have this:

Effect.ScrollTo("bottom", { duration: 5.0 });

So what I want is to stop this effect while it's scrolling whenever I want to.

Any help?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如梦亦如幻 2024-07-21 23:34:23

var scrollEffect = Effect.ScrollTo("bottom", { duration: 5.0 });

...

scrollEffect.cancel();

下面的代码非常适合我：

<html>
<head>
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js" type="text/javascript"></script>

    <style type="text/css" media="screen">
        body { font-size: 30px; }
        #destination { margin-top: 1400px; }
        #start { position: fixed; top: 10px; left: 20px;}
        #stop { position: fixed; top: 50px; left: 20px;}
    </style>

    <script type="text/javascript" charset="utf-8">
        function startEffect() {
            scrollEffect = Effect.ScrollTo("destination", { duration: 8.0 }); return false;
        }

        function stopEffect() {
            scrollEffect.cancel(); return false;
        }
    </script>
</head>
<body>
    <a id="start" href="#" onclick="return startEffect();">Start Effect</a>
    <a id="stop" href="#" onclick="return stopEffect();">Stop Effect</a>
    <p id="destination">Scroll Destination</p>
</body>
</html>

var scrollEffect = Effect.ScrollTo("bottom", { duration: 5.0 });

...

scrollEffect.cancel();

This code below works perfectly for me:

<html>
<head>
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js" type="text/javascript"></script>

    <style type="text/css" media="screen">
        body { font-size: 30px; }
        #destination { margin-top: 1400px; }
        #start { position: fixed; top: 10px; left: 20px;}
        #stop { position: fixed; top: 50px; left: 20px;}
    </style>

    <script type="text/javascript" charset="utf-8">
        function startEffect() {
            scrollEffect = Effect.ScrollTo("destination", { duration: 8.0 }); return false;
        }

        function stopEffect() {
            scrollEffect.cancel(); return false;
        }
    </script>
</head>
<body>
    <a id="start" href="#" onclick="return startEffect();">Start Effect</a>
    <a id="stop" href="#" onclick="return stopEffect();">Stop Effect</a>
    <p id="destination">Scroll Destination</p>
</body>
</html>

回复收藏 0 原文

尘曦 2024-07-21 23:34:23

我目前正在做的工作是有一个div，如下所示：

<div id="pausepos" style="position:absolute;"></div>

然后让JavaScript取消滚动并将其移回原来的位置：

    fallingPosTempArr = $("thetop").viewportOffset();
    fallingPosTemp = -1*fallingPosTempArr[1];

    $("pausepos").setStyle({
        "top" : fallingPosTemp + 'px'
    });

    scrollEffect.cancel();

    setTimeout(function () { Effect.ScrollTo("pausepos", { duration: 0.0 }); }, 10);

它可以工作，但在较慢的浏览器上，您可以看到页面如何跳回到顶部，然后再回来。

What I currently have working currently is having a div as follows:

<div id="pausepos" style="position:absolute;"></div>

Then having the JavaScript cancel the scrolling and move it back to where the original position was:

    fallingPosTempArr = $("thetop").viewportOffset();
    fallingPosTemp = -1*fallingPosTempArr[1];

    $("pausepos").setStyle({
        "top" : fallingPosTemp + 'px'
    });

    scrollEffect.cancel();

    setTimeout(function () { Effect.ScrollTo("pausepos", { duration: 0.0 }); }, 10);

It works, but on slower browsers you can see how the page jumps back to the top and then back again.

回复收藏 0 原文

~没有更多了~