How to Use Cypress scrollIntoView() Command

scroll-into-view-demo.cy.js

it('Window ScrollIntoView Demo - Lazy Loaded Images', () =>
   {
     const cameraImage = '#mz-product-listing-image-39217984-0-2 > div > div.carousel-item.active > img';
      cy.visit(urls.url1);
      /* Wait till the DOM contents are loaded */
     /* in this case, it is only the canvas element */
     cy.document().should((doc) => {
     expect(doc.readyState).to.equal('complete');
     });
      /* Scroll to the bottom */
     cy.scrollTo('bottom');
      cy.wait(1000);
      /* Scroll back to the top */
     cy.scrollTo('top');
      /* Additional cushioning for page loading */
     cy.wait(2000);
    
     /* Scroll into the view */
     /* Doc - https://docs.cypress.io/api/commands/scrollintoview#Use-linear-easing-animation-to-scroll */
     cy.get(cameraImage)
     .scrollIntoView({ easing: 'linear' })
     .invoke('css', {
       position: 'relative',              /* Ensure proper positioning */
       zIndex: '1000',                   /* Bring it to the front */
       backgroundColor: 'rgba(128, 128, 128, 0.5)', /* Light grey background */
       transition: 'background-color 2.5s ease'    /* Smooth transition */
     });
      /* Only for testing purpose */ 
     cy.wait(2000);
      /* Check if the image is within the view */
     /* Doc - https://docs.cypress.io/api/commands/scrollintoview#Scrolling */
     cy.get(cameraImage, { timeout: 2000 }).should('be.visible');
      /* Click on the element and verify if the click was successful */
     cy.get(cameraImage).click();
      /* Verify if the respective product page is open */
     cy.url().should('include', 'product_id=29');
      cy.log('Window ScrollIntoView Demo Complete')
   });