javascript - 如何控制动画滚动的速度？

Question

我目前正在尝试做这样的事情:

$(function() {
  $(".prev").mouseover(function() {
    $("#scrollPane").animate({
      "scrollTop": 0
    }, 1000);
  }).mouseout(function() {
    $("#scrollPane").stop();
  });
  $(".next").mouseover(function() {
    $("#scrollPane").animate({
      "scrollTop": $("#scrollPane .wrap").height()
    }, 1000);
  }).mouseout(function() {
    $("#scrollPane").stop();
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
}

body {
  margin: 15px auto;
  width: 450px;
}

#scrollPane {
  padding: 10px;
  max-height: 250px;
  overflow: hidden;
  background-color: #fff;
}

#scrollPane p {
  margin: 0 0 10px;
  text-align: justify;
}

.button {
  display: block;
  background-color: #ccf;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 0.75em;
  padding: 0 0 1px;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="button prev">
  <i class="fa fa-chevron-up"></i>
</div>
<div id="scrollPane">
  <div class="wrap">
    <p>Science is the methodical study of nature including testable explanations and predictions. From classical antiquity through the 19th century, science as a type of knowledge was more closely linked to philosophy than it is now and, in fact, in the
      Western world, the term "natural philosophy" encompassed fields of study that are today associated with science, such as astronomy, medicine, and physics. However, during the Islamic Golden Age foundations for the scientific method were laid by
      Ibn al-Haytham in his Book of Optics. While the classification of the material world by the ancient Indians and Greeks into air, earth, fire and water was more philosophical, medieval Middle Easterns used practical, experimental observation to classify
      materials.</p>
    <p>Today, the ever-evolving term "science" refers to the pursuit of knowledge, not the knowledge itself. It is often synonymous with "natural and physical science" and often restricted to those branches of study relating to the phenomena of the material
      universe and their laws. Although the term implies exclusion of pure mathematics, many university faculties include Mathematics Departments within their Faculty of Science. The dominant sense in ordinary use has a narrower use for the term "science."
      It developed as a part of science becoming a distinct enterprise of defining the "laws of nature"; early examples include Kepler's laws, Galileo's laws, and Newton's laws of motion. In this period it became more common to refer to natural philosophy
      as "natural science." Over the course of the 19th century, the word "science" became increasingly associated with the disciplined study of the natural world, including physics, chemistry, geology and biology. This sometimes left the study of human
      thought and society in a linguistic limbo, which was resolved by classifying these areas of academic study as social science. For example, psychology evolved from philosophy, and has grown into an area of study.</p>
    <p>Currently, there are both "hard" (e.g. biological psychology) and "soft" science (e.g. social psychology) fields within the discipline. As a result, and as is consistent with the unfolding of the study of knowledge and development of methods to establish
      facts, each area of psychology employs a scientific method. Reflecting the evolution of the development of knowledge and established facts and the use of the scientific method, Psychology Departments in universities are found within: Faculty of
      Arts and Science, Faculty of Arts, and a Faculty of Science. Similarly, several other major areas of disciplined study and knowledge exist today under the general rubric of "science", such as formal science and applied science.</p>
  </div>
</div>
<div class="button next">
  <i class="fa fa-chevron-down"></i>
</div>

我正在尝试以尽可能流畅的方式滚动内容。但不幸的是，它不起作用。卷轴的速度变得疯狂。当您将鼠标悬停在向上和向下箭头上时，它是不一致的。我应该如何控制速度？提前致谢。

Answer 1

我在这方面做过类似的事情。让我更新原始帖子中的代码:Scroll content on hover using jQuery and the Mathematics behind it ，我在其中提到您应该使用一种技术来计算一致的速度，而不是时间。现在，滚动的时间是一致的，无论您身在何处，它都会在一秒钟内向相反的方向滚动。

要使其正常工作，您需要考虑容器的scrollTop 和height。我建议你这样改变计时功能:

// To top
$("#scrollPane .wrap").outerHeight() - $("#scrollPane .wrap").scrollTop()
// To bottom
$("#scrollPane .wrap").height() * 2 - $(this).scrollTop()

这是上下的大概时间。我已经将时间从 1000 更改为下面代码中的上述表达式。我已经检查过它是否也有效。

$(function () {
  $(".prev").mouseover(function () {
    $("#scrollPane").animate({
      "scrollTop": 0
    }, $("#scrollPane .wrap").outerHeight() - $("#scrollPane .wrap").scrollTop());
  }).mouseout(function () {
    $("#scrollPane").stop();
  });
  $(".next").mouseover(function () {
    $("#scrollPane").animate({
      "scrollTop": $("#scrollPane .wrap").height()
    }, $("#scrollPane .wrap").height() * 2 - $(this).scrollTop());
  }).mouseout(function () {
    $("#scrollPane").stop();
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
}

body {
  margin: 15px auto;
  width: 450px;
}

#scrollPane {
  padding: 10px;
  max-height: 250px;
  overflow: hidden;
  background-color: #fff;
}

#scrollPane p {
  margin: 0 0 10px;
  text-align: justify;
}

.button {
  display: block;
  background-color: #ccf;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 0.75em;
  padding: 0 0 1px;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="button prev">
  <i class="fa fa-chevron-up"></i>
</div>
<div id="scrollPane">
  <div class="wrap">
    <p>Science is the methodical study of nature including testable explanations and predictions. From classical antiquity through the 19th century, science as a type of knowledge was more closely linked to philosophy than it is now and, in fact, in the
      Western world, the term "natural philosophy" encompassed fields of study that are today associated with science, such as astronomy, medicine, and physics. However, during the Islamic Golden Age foundations for the scientific method were laid by
      Ibn al-Haytham in his Book of Optics. While the classification of the material world by the ancient Indians and Greeks into air, earth, fire and water was more philosophical, medieval Middle Easterns used practical, experimental observation to classify
      materials.</p>
    <p>Today, the ever-evolving term "science" refers to the pursuit of knowledge, not the knowledge itself. It is often synonymous with "natural and physical science" and often restricted to those branches of study relating to the phenomena of the material
      universe and their laws. Although the term implies exclusion of pure mathematics, many university faculties include Mathematics Departments within their Faculty of Science. The dominant sense in ordinary use has a narrower use for the term "science."
      It developed as a part of science becoming a distinct enterprise of defining the "laws of nature"; early examples include Kepler's laws, Galileo's laws, and Newton's laws of motion. In this period it became more common to refer to natural philosophy
      as "natural science." Over the course of the 19th century, the word "science" became increasingly associated with the disciplined study of the natural world, including physics, chemistry, geology and biology. This sometimes left the study of human
      thought and society in a linguistic limbo, which was resolved by classifying these areas of academic study as social science. For example, psychology evolved from philosophy, and has grown into an area of study.</p>
    <p>Currently, there are both "hard" (e.g. biological psychology) and "soft" science (e.g. social psychology) fields within the discipline. As a result, and as is consistent with the unfolding of the study of knowledge and development of methods to establish
      facts, each area of psychology employs a scientific method. Reflecting the evolution of the development of knowledge and established facts and the use of the scientific method, Psychology Departments in universities are found within: Faculty of
      Arts and Science, Faculty of Arts, and a Faculty of Science. Similarly, several other major areas of disciplined study and knowledge exist today under the general rubric of "science", such as formal science and applied science.</p>
  </div>
</div>
<div class="button next">
  <i class="fa fa-chevron-down"></i>
</div>

在上面的代码中，我们通过将内容的滚动速度而不是时间作为基础来做到这一点。在上述情况下，时间将根据 scrollPane 元素的 scrollTop 值动态计算。我希望这会有所帮助。