时间戳

首页 > 解决方案 > 滚动上的打字效果

javascript - 滚动上的打字效果

问题描述

我搜索了答案，但没有什么对我真正有用，所以我将在这里发布我的问题（对于新手的错误请原谅）。

我需要向下滚动时触发的打字效果，向上滚动时会向后运行。

// 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>

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

标签： javascriptjqueryhtml

解决方案

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

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

您可以将其放在与其他代码相同的脚本块中，只需调用 Type() 或 Delete() 而不是在滚动函数中重新定义这些方法。

推荐阅读