Cookbook: creating a custom directive for scroll events #1468
Conversation
|
|
||
| ## Simple Example | ||
|
|
||
| There are many times that we might want to add a bit of behavior, especially animation, to a scroll event on a site. There are many ways to do so, but the path with the least amount of code and dependencies is to use a [custom directive](https://vuejs.org/v2/guide/custom-directive.html) to create a hook for anything that fires off a particular scroll event. |
There was a problem hiding this comment.
Maybe is perhaps to use… instead? Unless we're 100% sure that a directive is always shorter.
There was a problem hiding this comment.
Ah good point. I can't think of a time when it wouldn't be shorter but I'm sure there are edge cases out there :)
|
|
||
| ``` js | ||
| Vue.directive('scroll', { | ||
| inserted: function(el, binding) { |
There was a problem hiding this comment.
Call me nick-picky, but there should be a space after function following to Vue's coding standard.
There was a problem hiding this comment.
Oh, and often we don't use semi-colons ;) (pun not intended).
| if (window.scrollY > 50) { | ||
| el.setAttribute("style", "opacity: 1; transform: translate3d(0, -10px, 0)") | ||
| } | ||
| return window.scrollY > 100; |
There was a problem hiding this comment.
Looks like there's an indent issue here.
| </div> | ||
| ``` | ||
|
|
||
| <p class="tip">Remember! The directive must be registered before the Vue instance</p> |
There was a problem hiding this comment.
Maybe finish the second sentence with a period?
| ease: Sine.easeOut | ||
| }) | ||
| } | ||
| return window.scrollY > 100; |
There was a problem hiding this comment.
I should just run it through prettier. Too bad the default formatter for codepen is a different style than what we use so I can't use it. Thanks!
|
|
||
| ## The Benefit of Using Custom Directives | ||
|
|
||
| Vue is rich with options for directives, most of which cover very common use-cases, which can create a very productive developer experience. But even if you have an edge case not covered by the framework, it's got you covered in this case as well, because you can quite easily create a custom directive to fit your need. |
There was a problem hiding this comment.
Shouldn't it be "fit your needs?"
|
Thanks for the review! I updated the PR based on the suggestions. Also included: the ordering of the cookbook was all over the place, so I updated the entries to use solid numbers in the order that the PRs were received to avoid the collision here. I'll start making sections for them in a subsequent PR. |
This cookbook example shows how you can coordinate animations triggered on scroll with the use of custom directives, and then also how to optimize further and pass arguments for repetitive code.