Velocity.js: Uncaught (in promise) Error: Velocity: First argument (scroll) was not a

Question

This is an example from http://velocityjs.org/#scroll

Excuse me but I'm a noob of Velocity.js, jQuery and StackOverflow XD. I have the following error:

Uncaught (in promise) Error: Velocity: First argument (scroll) was not a property map, a known action, or a registered redirect. Aborting.

Thank you in advice.

/*
 *
 *
THIS IS myscript.js
 *
 *
 */

// Use scroll with the container option.
// Note: When you want to scroll the browser window itself, do not pass in a container.
$("#element3").velocity("scroll", { 
  container: $("#container"),
  duration: 800,
  delay: 500
});

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
body {
  font-family: "Helvetica Neue", Helvetica;
  width: 90%;
  font-weight: 200;
  letter-spacing: 1px;
  margin: 25px auto 0 auto;
  background: rgb(234, 235, 235);
  color: rgb(25, 25, 25);
}

div, p {
  margin: 0 auto;
}

p {
  color: rgb(125, 125, 125);
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 17px;
}

#container {
  border: 1px solid gray;
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  /* Remember that a scrolling container element must have a position set. */
  position: relative;
  width: 50%;
}

#container div {
  padding-bottom: 10px;
}
</style>

</head>
<body>

<div id="container">
    <div id="element1">
      First element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
    </div>
    <div id="element2">
      Second element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
    </div>
    <div id="element3">
      Third element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
    </div>
    <div id="element4">
      Fourth element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
    </div>
    <div id="element5">
      Fifth element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
    </div>
    <div id="element6">
      Sixth element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
    </div>
</div>

<script src="velocity.min.js"></script>
<script src="velocity.ui.js"></script>
<script src="myscript.js"></script>

</body>
</html>

EDIT: same problem here Velocity Scroll Issue with Version 2.0.1

score 1 · Accepted Answer · answered Feb 27 '18 at 19:48

You're trying to use Velocity V2 beta with V1 demos - they're totally incompatible where scrolling is concerned. In V2 it is now a property of the element that is getting scrolled (ie, the container).

The V2 documentation is in the Velocity Github wiki, if it's not mentioned there then don't use it and expect it not to change (though using scrollTop and scrollLeft will stay consistent now, it's just the underlying code that might change) - the V1 documentation still exists on the website as V2 is still in beta.

Velocity.js: Uncaught (in promise) Error: Velocity: First argument (scroll) was not a

1 Answers1