وقف Effect.ScrollTo () في حين انها التمرير؟

https://stackoverflow.com/questions/644805

22-07-2019
|

سؤال

نعم، أساسا لدي هذا:

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

وإذا ما أريد هو أن يتوقف هذا التأثير حين انها التمرير كلما كنت ترغب في ذلك.

وأي مساعدة؟

المحلول

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>

نصائح أخرى

ما لدي حاليا أعمل حاليا هو وجود شعبة كما يلي:

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

وبعد ذلك وجود جافا سكريبت إلغاء التمرير والتحرك مرة أخرى إلى حيث كان الموقف الأصلي:

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

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

    scrollEffect.cancel();

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

وكان يعمل، ولكن على أبطأ المتصفحات يمكنك أن ترى كيف يقفز الصفحة إلى أعلى ومن ثم العودة مرة أخرى.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow