Javascript，暂停打字机

Question

I have a question with my javascript. The problem I am facing is that, with my one page website. I have a typewriter.js that is running within a div. What I am trying to accomplish is that when you are scrolling up or down, the typewriter 'freezes' (pause) and when you scroll back to the page, the typewriter continues again.

HTML Typewriter

    <div class="type-o">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque consectetur pulvinar. Pellentesque a dapibus nisi.</p>
    </div>

Javascript onepage

//section 1
if(anchorLink == 'Illusiveman'){
    $(".type-o").typewriter('typestart');
}

if ((index == 2 && direction == 'down') || (index == 2 && direction == 'up')){
    $(".type-o").typewriter('typepause');
}

Javascript Typewriter

    $.fn.typewriter = function(a) {
        this.each(function() {
            var $ele = $(this), str = $ele.text(), progress = 0;
            $ele.text('');
            var timer = setInterval(function() {

                if(a = 'typestart'){
                    $ele.text(str.substring(0, progress++) + (progress & 1 ? '_' : ''));
                    if (progress >= str.length) clearInterval(timer);

                }else if(a == 'typepause'){
                    clearInterval(timer);
                }   

            }, 100);
        });     
    return this;
};

What I am having now, is that if you leave the content.. The typewriter continues, but when you scroll back to the content, the typewriter starts again, like when you are having insert enabled in word. And I am currently out of idea's, so that is why I need some help.

• By the way, I am using Jason Frame's Grab Bag typewriter script here.
• I created a live-preview of my problem.8 The button should be ofcourse be the scroll function. http://jsbin.com/eguxev/134/edit?html,js,output

Thanks!

Answer 1

UPDATED after correcting your code( see for your self ) you only have to bind the scroll event to the whatever element you want and the scrolling will pause the type

$( "yourelemntselector" ).scroll(function(){
    $(".type-o").typewriter('typepause');
});