Question

我正在创建平滑滚动和反弹（顶部和底部）效果。（经过一整天的试验和错误，）我能够成功实施它。我现在无法找到一种方法来获得可重复使用的干净代码。（我认为这被称为算法？）

我遇到的具体问题是<=和>=之间的交替。整个代码可以使用一些清理，我尽我所能，但我认为它需要更多（如果它没有，请告诉我）。

所以在可重复使用的function中，就像这样：

function reusableFunction() {
    ...
    if (num1 >= num2) // One case I have to compare like this
    if (num1 <= num2) // Another case, I have to compare like this
    ...
}

我被困在function bounceBack的第86行。如果您有更好的方式进行平滑滚动和弹跳效果，请发布作为答案。我不想使用任何图书馆或其他框架（如JQuery）。

＆＃13;

console.clear();

var innerWrapper = document.getElementById('innerWrapper');
innerWrapper.addEventListener('mousewheel', handleScroll);
innerWrapper.style.transform = 'translate3d(0px, 0px, 0px)';

var interval, // scroll is being eased
  mult = 0, // how fast do we scroll
  dir = 0, // 1 = scroll down, -1 = scroll up
  steps = 50, // how many steps in animation
  length = 30; // how long to animate

var bouncePadding = 30;

function handleScroll(e) {
  e.preventDefault();
  clearInterval(interval); // cancel previous animation
  ++mult; // we are going to scroll faster
  var delta = -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  if (dir != delta) { // scroll direction changed
    mult = 1; // start slowly
    dir = delta;
  }
  var start = parseInt(innerWrapper.style.transform.split(',')[1], 10); // Get x from translate3d
  var end = start + length * mult * delta; // where to end the scroll
  var change = end - start; // base change in one step
  var step = 0; // current step
  var scrolledToBottom = innerWrapper.scrollHeight - innerWrapper.parentElement.offsetHeight;
  var tempVar;

  interval = setInterval(function() {
    var scrollPosition = easeOut(step++, start, -change, steps);
    scrollPosition = clamp(scrollPosition, -scrolledToBottom - bouncePadding, 0 + bouncePadding);
    innerWrapper.style.transform = 'translate3d(0px, ' + scrollPosition + 'px, 0px)';
    if (tempVar === scrollPosition) {
      step = steps;
    } else {
      tempVar = scrollPosition
    }

    if (step >= steps) { // scroll finished without speed up - stop by easing out
      endScrollCallback();

      if (scrollPosition > 0 && dir === -1) {
        step = 0;
        var myInterval = setInterval(function() {
          var scrollPos = easeOut(step++, scrollPosition, -scrollPosition, 15);
          innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';

          if (scrollPos <= 0) {
            clearInterval(myInterval);
            innerWrapper.style.transform = 'translate3d(0px, ' + (0) + 'px, 0px)';
          }
        }, 10);
      } else if (scrollPosition < -scrolledToBottom && dir === 1) {
        step = 0;
        var myInterval = setInterval(function() {
          var change = -scrolledToBottom - scrollPosition;
          var scrollPos = easeOut(step++, scrollPosition, change, 15);
          innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';

          if (scrollPos >= -scrolledToBottom) {
            clearInterval(myInterval);
            innerWrapper.style.transform = 'translate3d(0px, ' + (-scrolledToBottom) + 'px, 0px)';
          }
        }, 10);
      }
    }
  }, 10);
}

function easeOut(t, b, c, d) {
  t /= d;
  return -c * t * (t - 2) + b;
}

function endScrollCallback() {
  mult = 0;
  clearInterval(interval);
}

function bounceBack(from, to, difference) {
  var step = 0;
  var interval = setInterval(function() {
    var scrollPos = outQuartic(step++, from, difference, 15);
    innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';
    if (scrollPos <= 0) { /* Got stuck here */
      clearInterval(interval);
      innerWrapper.style.transform = 'translate3d(0px, ' + to + 'px, 0px)';
    }
  }, 10);
}

function clamp(val, min, max) {
  if (typeof min !== 'number') min = 0;
  if (typeof max !== 'number') max = 1;
  return Math.min(Math.max(val, min), max);
}

＆＃13;

body {} #outerWrapper {
  width: 500px;
  height: 400px;
  overflow: hidden;
  background-color: black;
}
#content {
  background-image: url("http://images.freeimages.com/images/premium/previews/3037/30376024-beautiful-flower-portrait.jpg");
}

＆＃13;

<div id="outerWrapper">
  <div id="innerWrapper">
    <div id="content">
      Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero
      sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus
      Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus
      enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar
      justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames
      ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque
      Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem
      lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie
      vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum
      vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque
      Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci
      Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla.
      Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet
      consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet
      risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat
      Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor
      dolor
    </div>
  </div>
</div>

＆＃13;

Answer 1

通常，要自定义一个函数，即<=，可以使用函数。如果您想自定义如下语句：

if (a <someFunction> b){
  // ...
}

您的案例中someFunction可以是<=或>，其中一种方法可以是：

function f(a,b,conditionsMet){
  return conditionsMet ? a <= b : a > b;
}

然后调用它：

if ( f(a,b,are conditions met?) ){
  // ...
}

（不确定这是不是你的意思，随时发表评论......）

如何使用交替的if语句创建可重用的函数

1 个答案: