滚动到该部分时将执行功能

Question

我有这些代码可以在textarea占位符中制作键入脚本，它可以正常工作，但是当我滚动到div表单时，我需要执行typeIt函数。

var txt =“滚动到该部分时将执行功能”; varmodified_txt =“”;

    function humanize() {
        return Math.round(Math.random() * (200 - 30)) + 30;
    }

    //Delete final character in modified string
    function deleteCharacter(text) {
        //return everything but the last character
        text = text.substring(0, text.length - 1);
        return text;
    }

    //Insert character_added at end of text
    function addCharacter(text, character_added) {
        text = text + character_added;
        return text;
    }

    //typos[char].error is just a self reference, it is not used
    var typos = {
    }

    var timeOut;
    var txtLen = txt.length;
    var char = 0;
    $('textarea').attr('placeholder', '|');
    function typeIt() {
        modified_txt += txt.charAt(char);
        $('textarea').attr('placeholder', modified_txt + '|');

        if (char === txtLen) {
            $('textarea').attr('placeholder', $('textarea').attr('placeholder').slice(0, -1)); // remove the '|'
            return; //Stop the loop once text is completely written.
        }

        var test = typos[char];
        if (test !== undefined) {
            setTimeout(function () {
                var chunk_one = test.correction(modified_txt);
                modified_txt = chunk_one;
                char++;
                typeIt();
            }, humanize());
        }
        //If no typos are found then move to the next character
        else {
            setTimeout(function () {
                char++;
                typeIt();
            }, humanize());
        }
    }

    $(function () {
        typeIt();

    });//end jquery

Answer 1

您需要捕获事件处理程序并将其分配给滚动事件。

为了演示的目的，我对一些虚拟数据进行了划分

HTML内容

<div id="scrollDiv" style="width:50px;height:50px;overflow:scroll;" >We've Worked For a lot of people and of course we've made them so happy! You can read some handpicked Word about us here We've Worked For a lot of people and of course we've made them so happy! You can read some handpicked Word about us here

We've Worked For a lot of people and of course we've made them so happy! You can read some handpicked Word about us here We've Worked For a lot of people and of course we've made them so happy! You can read some handpicked Word about us here</div>

jQuery的

  $('#scrollDiv').scroll(function(){
alert('scrolling');
});

Answer 2

您可以通过这种方式使用它（例如您的代码库）：

<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div id="2">2</div>
<div>2</div>
<div>2</div>
<div>2</div>

<script>
    var oTop = $('#2').offset().top - window.innerHeight;
    $(window).scroll(function () {

        var pTop = $('body').scrollTop();
        console.log(pTop + ' - ' + oTop);   //just for your debugging
        if (pTop > oTop) {
            alert();
        }
    });

    function humanize() {
        return Math.round(Math.random() * (200 - 30)) + 30;
    }

    //Delete final character in modified string
    function deleteCharacter(text) {
        //return everything but the last character
        text = text.substring(0, text.length - 1);
        return text;
    }

    //Insert character_added at end of text
    function addCharacter(text, character_added) {
        text = text + character_added;
        return text;
    }

    //typos[char].error is just a self reference, it is not used
    var typos = {
    }

    var timeOut;
    var txtLen = txt.length;
    var char = 0;
    $('textarea').attr('placeholder', '|');
    function typeIt() {
        modified_txt += txt.charAt(char);
        $('textarea').attr('placeholder', modified_txt + '|');

        if (char === txtLen) {
            $('textarea').attr('placeholder', $('textarea').attr('placeholder').slice(0, -1)); // remove the '|'
            return; //Stop the loop once text is completely written.
        }

        var test = typos[char];
        if (test !== undefined) {
            setTimeout(function () {
                var chunk_one = test.correction(modified_txt);
                modified_txt = chunk_one;
                char++;
                typeIt();
            }, humanize());
        }
            //If no typos are found then move to the next character
        else {
            setTimeout(function () {
                char++;
                typeIt();
            }, humanize());
        }
    }

    $(function () {
        typeIt();

    });//end jquery
</script>