Snippets Collections
 const options = {
        rootMargin: '0px 0px -200px 0px'
    }

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if(entry.isIntersecting) {
                entry.target.classList.add('show');
                observer.unobserve(entry.target);
            } else {
                return;
            }
        })
    }, options);

    const h1 = document.querySelector('h1'); // targets one element
    observer.observe(h1);

    const paras = document.querySelectorAll('p'); 
    paras.forEach(p => observer.observe(p)); //targets multple element with a loop
// Callback function to execute when intersections are detected

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is in view');
      // Perform actions like loading images, animations, etc.
    } else {
      console.log('Element is out of view');
    }
  });
};

// Options object

const options = {
  root: null, // relative to the viewport
  rootMargin: '0px', // margin around the root
  //threshold: 0.1 // trigger callback when 10% of the element is visible
  treshold: 0, //means out of the viewport
};

// Create an instance of IntersectionObserver with the callback and options

const observer = new IntersectionObserver(callback, options);

// Target element to be observed

const target = document.querySelector('.target-element');

// Start observing the target element

observer.observe(target);
//html
 <div class="scroll-indicator">Scroll Position: <span id="scrollPos">0</span></div> 

   
   
 //js
const scrollPosElement = document.getElementById('scrollPos');

window.addEventListener('scroll', function() {
            const scrollTop = document.documentElement.scrollTop || window.pageYOffset;
            scrollPosElement.textContent = scrollTop;
        });
// the oldler way
function heroBtnScroll() {

  const featuresEl = document.querySelector('#section--1');   // target element
  const featuresElPosition = featuresEl.getBoundingClientRect(); // element positioned
  console.log(featuresElPosition);
  const { top, left } = featuresElPosition; //destructure to get positions from the getBoundingClientRect()
  window.scrollTo({
    left: left,
    top: top + window.scrollY,
    behavior: 'smooth',
  });
}
const heroBtn = document.querySelector('.btn--scroll-to');
if (heroBtn) {
  heroBtn.addEventListener('click', heroBtnScroll);
}



//the newer way using scrollIntoView

function heroBtnScroll() {
  const featuresEl = document.querySelector('#section--1');
  featuresEl.scrollIntoView({ behavior: 'smooth' });
}

const heroBtn = document.querySelector('.btn--scroll-to');
if (heroBtn) {
  heroBtn.addEventListener('click', heroBtnScroll);
}




// testing scrolling behaviours with the document and the viewport in the console
window.addEventListener('scroll', () => {
  console.log('Viewport height:', document.documentElement.clientHeight);
  console.log('Vertical scroll position:', window.scrollY);
});
cy.scrollTo(0, 500) // Scroll the window 500px down
cy.get('.sidebar').scrollTo('bottom') // Scroll 'sidebar' to its bottom
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyScrollableScreen(),
    );
  }
}

class MyScrollableScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Scrollable Screen'),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            children: List.generate(
              18, // Number of main views
              (rowIndex) => Container(
                height: 80, // Set the height of each row
                margin: EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 1.0),
                ),
                child: Row(
                  children: List.generate(
                    20, // Number of labels
                    (columnIndex) => Container(
                      width: 80, // Set the width of each label
                      child: Center(
                        child: Text('Label $columnIndex'),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
const [scroll, setScroll] = useState(false);
 useEffect(() => {
   window.addEventListener("scroll", () => {
     setScroll(window.scrollY > 50);
   });
 }, []);


className={scroll ? "bg-black" : "bg-white"}
    func setScrollView() {
        let contentWidth = topPlayersTableView.layer.frame.width + 20
        scrollView.contentSize = CGSize(width: contentWidth, height: scrollView.frame.height)
        scrollView.isPagingEnabled = true
    }
<style>
	html, body {
  		overflow-y: hidden;
  	}
</style>

<script>
  $(function(){
  setTimeout(function(){
    $('html')
    .css({
      'overflow-y': 'scroll'
    })
    
  	window.scrollTo(0, 0);
  }, 3000);
});
</script>
<script>
  $(".modal__open").click((e) => {
    e.preventDefault();
  	$('html')
    .css({
      'overflow-y': 'hidden'
    })
  })
  
  
  $(".modal__close").click((e) => {
    e.preventDefault();
  	$('html')
    .css({
      'overflow-y': 'scroll'
    })
  })
</script>
#page .page-section {position: sticky!important; top: 0px!important} html {scroll-behavior: smooth} 

Here is the code from this tutorial with a little bit of a shadow to create even more depth between these pages sections. 

#page .page-section {position: sticky!important; top: 0px; box-shadow: 5px 5px 15px rgba(0,0,0,0.8)!important} html {scroll-behavior: smooth}
<style>
 .spacer {
  height: 100vh;
}

a {
  color: #3d3d3d;
  font-family: Arial, Helvetica, sans-serif;
}
/* The magic one liner that allows for smooth scrolls */
html {
  scroll-behavior: smooth;
}

  /* Removes the animation for users that don't prefer it */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
  
 </style>

<h1 id="top"><a href="#middle">Let's go to the middle of the page</a></h1> 

<div class="spacer">
  &nbsp;
</div>

<h1 id="middle"><a href="#bottom">Go to the bottom?</a></h1>

<div class="spacer">
  &nbsp;
</div>

<h1 id="bottom"><a href="#top">Nah, let's go back to the top</a></h1>
func scrollToBottom(){
    DispatchQueue.main.async {
        let indexPath = IndexPath(row: self.dataArray.count-1, section: 0)
        self.tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
    }
}
star

Fri Jul 05 2024 00:40:42 GMT+0000 (Coordinated Universal Time)

#scroll #intersectionobserver #observer
star

Thu Jul 04 2024 23:50:15 GMT+0000 (Coordinated Universal Time)

#scroll #intersectionobserver #observer
star

Thu Jul 04 2024 22:32:36 GMT+0000 (Coordinated Universal Time)

#scroll #scrollposition #pageoffset
star

Tue Jul 02 2024 03:28:51 GMT+0000 (Coordinated Universal Time)

#dom #scroll #scrollintoview
star

Mon May 13 2024 08:36:05 GMT+0000 (Coordinated Universal Time) https://docs.cypress.io/api/commands/scrollTo

#scroll
star

Tue Dec 05 2023 07:39:43 GMT+0000 (Coordinated Universal Time) https://codepen.io/jh3y/pen/XWOodoP

#css #scroll #animation
star

Wed Nov 29 2023 10:25:06 GMT+0000 (Coordinated Universal Time)

#flutter #dart #scroll
star

Wed Oct 25 2023 06:34:21 GMT+0000 (Coordinated Universal Time) https://www.bram.us/2023/10/23/css-scroll-detection/

#css #scroll #animation
star

Mon Oct 23 2023 06:24:26 GMT+0000 (Coordinated Universal Time) https://tympanus.net/Development/OnScrollViewSwitch/

#scroll #animations #view-switch
star

Fri May 19 2023 18:04:22 GMT+0000 (Coordinated Universal Time)

#hooks #scroll
star

Wed Jan 25 2023 15:36:09 GMT+0000 (Coordinated Universal Time) https://chat.openai.com/chat/07129f0f-4c3a-4dc4-892c-f0353b6ad551

#ios #swift #scroll #horizontal #snippet
star

Mon Apr 11 2022 23:48:53 GMT+0000 (Coordinated Universal Time)

#js #scroll #css #setup
star

Mon Apr 11 2022 23:45:27 GMT+0000 (Coordinated Universal Time)

#js #scroll
star

Tue Mar 15 2022 13:06:02 GMT+0000 (Coordinated Universal Time) https://insidethesquare.co/squarespace-tutorials/summary-hover-effects-62te9

#sticky #scroll #sections
star

Wed Feb 23 2022 17:11:51 GMT+0000 (Coordinated Universal Time) https://gomakethings.com/smooth-scrolling-links-with-only-css/

#html #css #scroll #animation
star

Tue Jan 18 2022 12:41:24 GMT+0000 (Coordinated Universal Time)

#ios #swift #scroll
star

Fri Oct 30 2020 13:20:16 GMT+0000 (Coordinated Universal Time) https://codepen.io/robertostringa/pen/XWKEeRw

#scroll #javascript

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension