滚动效果

Question

我搜索了答案，但对我来说真的没有任何用处，因此，我将在此处发布我的问题（对新手错误表示抱歉）。

我需要在向下滚动时触发键入效果，在向上滚动时会向后运行

。

// typing text
var _CONTENT = ["Test...test....test....test....test.....test"];

// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Cursor element 
var _CURSOR = document.querySelector("#cursor");

// Implements typing effect
function Type() {
  // Get substring with 1 characater added
  var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
  _ELEMENT.innerHTML = text;
  _PART_INDEX++;
}

// Implements deleting effect
function Delete() {
  // Get substring with 1 characater deleted
  var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
  _ELEMENT.innerHTML = text;
  _PART_INDEX--;
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="text"></div>
  <div id="cursor"></div>
</div>

上面我找到了一个打字效果的例子，我可以根据自己的需要进行调整，并且效果很好。 然后，我尝试环绕滚动功能（如上所述，我留下了其他代码），但没有结果。

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
      function Type() {
        // Get substring with 1 characater added
        var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
        _ELEMENT.innerHTML = text;
        _PART_INDEX++;
      }
    } else {
      function Delete() {
        // Get substring with 1 characater deleted
        var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
        _ELEMENT.innerHTML = text;
        _PART_INDEX--;
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="text"></div>
  <div id="cursor"></div>
</div>

谁能告诉我我的错误在哪里？非常感谢您的帮助。

Answer 1

您的向上/向下滚动检测可能无法正常工作。这样做可以让您准确地检测方向：

var _top = $(window).scrollTop();
$(window).scroll(function(){
    var _cur_top = $(window).scrollTop();
    if(_top < _cur_top)
    {
        Type();
    }
    else
    {
        Delete();
    }
    _top = _cur_top;    
});

您可以将其与其他代码放在同一脚本块中，而只需调用Type（）或Delete（）即可，而不必在滚动功能内重新定义这些方法。