How can I convert scrollIntoView with smooth animation to a Promise?

scrollintoview smooth
scrollintoview smooth not working
scrollintoview offset
cannot read property 'scrollintoview' of null
angular scrollintoview
react scrollintoview
vue scrollintoview
scrollintoview callback

I have to scrollIntoView a particular element smoothly and then do something.

Example

element.scrollIntoView({behavior: 'smooth'}).then(() => {
    // Do something here
})

I know that it can't be done this way as native scrollIntoView doesn't return a Promise. But, how do I achieve something like this?

I'm using Angular 7 BTW. So if there are any directives that could help me achieve this, it would be great.

You can work with prototypes, I think this could be a solution to your problem without download any npm packages

/* Extends Element Objects with a function named scrollIntoViewPromise
*  options: the normal scrollIntoView options without any changes
*/

Element.prototype.scrollIntoViewPromise = function(options){

  // "this" refers to the current element (el.scrollIntoViewPromise(options): this = el)
  this.scrollIntoView(options);
  
  // I create a variable that can be read inside the returned object ({ then: f() }) to expose the current element 
  let parent = this;
  
  // I return an object with just a property inside called then
  // then contains a function which accept a function as parameter that will be execute when the scroll ends 
  return { 
    then: function(x){
      // Check out https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API for more informations  
      const intersectionObserver = new IntersectionObserver((entries) => {
        let [entry] = entries;
        
        // When the scroll ends (when our element is inside the screen)
        if (entry.isIntersecting) {
        
          // Execute the function into then parameter and stop observing the html element
          setTimeout(() => {x(); intersectionObserver.unobserve(parent)}, 100)
        }
      });
      
      // I start to observe the element where I scrolled 
      intersectionObserver.observe(parent);
    }
  };
}


element.scrollIntoViewPromise({behavior: "smooth"}).then(()=>console.log("EHI!"));

How can I convert scrollIntoView with smooth animation to a Promise?, I have to scrollIntoView a particular element smoothly and then do something. Example element.scrollIntoView({behavior: 'smooth'}).then(() => { // Do something � scrollIntoView(target, [options]) => Promise. scroll-into-view-if-needed does not return anything, while this library will return a Promise that is resolved when all of the scrolling boxes are finished scrolling. The ability to cancel animations will be added in a future version. options. Type: Object. behavior. Type: 'auto' | 'smooth' | Function

One way you can solve this is by using smooth-scroll-into-view-if-nedded it actually return a promise so you can bind to it and apply your logic.

Element.scrollIntoView(), I have to scrollIntoView a particular element smoothly and then do something. Example element.scrollIntoView({behavior: 'smooth'}).then(() => {� Your content.scrollIntoView({behaviour: "smooth"}); should work, however, I think 'behaviour' is spelt behavior. I did develop a way of smooth scrolling with TypeScript, but you should be able to convert to JS quite easily: View stackoverflow answer

There is an idea how you may catch animation ending. You may do it in vanilla JS with a 'scroll' event listener. Check this example https://codepen.io/Floky87/pen/BEOYvN

var hiddenElement = document.getElementById("box");
var btn = document.querySelector(".btn");
var isScrolling;

function handleScroll(event) {
  // Clear our timeout throughout the scroll
  window.clearTimeout(isScrolling);

  // Set a timeout to run after scrolling ends
  isScrolling = setTimeout(function() {
    alert(1);
    document.removeEventListener("scroll", handleScroll);
  }, 66);
}

function handleButtonClick() {
  document.addEventListener("scroll", handleScroll, false);
  hiddenElement.scrollIntoView({ block: "center", behavior: "smooth" });
}

btn.addEventListener("click", handleButtonClick);

stipsan/scroll-into-view-if-needed: Element.scrollIntoView , scrollIntoView ponyfills for things like "if-needed" and "smooth" Some people get motion sick from animations. You can use CSS to turn off smooth scrolling in those cases to avoid making them dizzy: you to implement a Promise interface if you want to (check smooth-scroll-into-view-if-needed to see an example of that) . Spec. Right now you can't really tell if scrollIntoView scroll animation has finished nor you can't control the speed of the scroll and it might differ with each browser. So if you want to perform some action right after the animation has finished there's no determined way to do that.

How to set smooth scroll after clicking the link using JavaScript , Method 1: Using scrollIntoView() with the 'smooth' behavior: The This will smoothly animate all the anchor links on the page when they are� In the past, many plugins (e.g. jQuery) have enabled the ability to cause a page to scroll down in a smooth animated fashion, rather than the sudden jarring fashion that occurs by default. This technique is often used for same-page (local) links that jump to specific sections of longform content. The following script and demo shows how you can do smooth animated in-page scrolling with

scrollIntoView, scrollIntoView() // Scrolls 'footer' into view Incorrect Usage cy.scrollIntoView(' Utilities. _ � $ � Blob � minimatch � moment � Promise � sinon. Cypress API Pass in an options object to change the default behavior of .scrollIntoView() . easing, swing, Will scroll with the easing animation. log, true, Displays� It returns a promise that resolves when the animation is done; It accepts an element as coordinate and scrolls to it (also works with a selector like #some-section-id) It will not overwrite any existing public structure (like the scrollTo native function or Math's prototype) Has a default duration

javascript smooth scroll to anchor element Code Example, Get code examples like "javascript smooth scroll to anchor element" instantly right from your scrollIntoView({ chart.js line chart � chart.js line chart animation on canvas update react class state � chart.js on convert functoin with call back to promise � convert hashmap into json � convert int to timestanp js� element.scrollIntoView(); element.scrollIntoView(alignToTop); // Boolean parameter element.scrollIntoView(scrollIntoViewOptions); // Object parameter Parameters alignToTop Optional Is a Boolean value: If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor.

Comments
  • I certainly wasn't able to understand what you said. Could you be more descriptive about the code that you have written?
  • I added some comments. Hope this new version could help. Tell me if you have any specific question.
  • @FedericoGalfione hi i got some issues here, stackoverflow.com/q/56076337/8662236 Thanks again
  • If it does what you say it'll be amazing. But I think 115kb is an overkill just for scroll.
  • Seems quite promising.