scroll behaviours testing

//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;
        });

func scrollToBottom(){
    DispatchQueue.main.async {
        let indexPath = IndexPath(row: self.dataArray.count-1, section: 0)
        self.tableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
    }
}

<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>

#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}

<script>
  $(".modal__open").click((e) => {
    e.preventDefault();
  	$('html')
    .css({
      'overflow-y': 'hidden'
    })
  })
  
  
  $(".modal__close").click((e) => {
    e.preventDefault();
  	$('html')
    .css({
      'overflow-y': 'scroll'
    })
  })
</script>

<style>
	html, body {
  		overflow-y: hidden;
  	}
</style>

<script>
  $(function(){
  setTimeout(function(){
    $('html')
    .css({
      'overflow-y': 'scroll'
    })
    
  	window.scrollTo(0, 0);
  }, 3000);
});
</script>

    func setScrollView() {
        let contentWidth = topPlayersTableView.layer.frame.width + 20
        scrollView.contentSize = CGSize(width: contentWidth, height: scrollView.frame.height)
        scrollView.isPagingEnabled = true
    }

const [scroll, setScroll] = useState(false);
 useEffect(() => {
   window.addEventListener("scroll", () => {
     setScroll(window.scrollY > 50);
   });
 }, []);


className={scroll ? "bg-black" : "bg-white"}

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'),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

cy.scrollTo(0, 500) // Scroll the window 500px down
cy.get('.sidebar').scrollTo('bottom') // Scroll 'sidebar' to its bottom

// 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);
});