scrolling behaviour test 1

PHOTO

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

Saved by @davidmchale #dom #scroll #scrollintoview

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

COPY

Save snippets that work from anywhere online with our extensions

Comments

JS

@davidmchale

If statement with switch delete duplicates from an array loop and find class Nullish with an Object - basic tranverse classes in a list substring capitalize substring text with elipses array.at() js media query Dynamic Filter - buttons advanced flow converted if statement Add an array to a HTML dataset getElement Function Intersection Observer template intersection Observer Basic Example fetch data, display and filter for of loop - get index get random index value from an array fetch with post method get id value from url debounce for scrolling get element or elements check functions return values from functions indexOf explantion sorting basic using for-of loop for getting index value of iteration import json data into a JS module Splide slider with modal JS change active class if url path matches Pagination / array of arrays FIlter array or return full array price formatting ignores wrapping element on click Create a dummy array with numbers Random Generated Number Dummy array - list items dummy id Limits the amount of text Random Number generator function format date function Remove duplicates from JSON array data Filter Posts from state remove duplicates and create object simple ternary remove transition with propertyName sorting in reverse counting items using reduce splice explanation Declaring Variables Get primitive properties on a number / string etc using proto check an array of objects exists / check using regex Destructuring nested function scope IFFE function basic switch Switch with function passing an object check length of object while loops (for when the number we are iterating over is unknown) Ternary with 2 conditions for of loop with index array nested ternary operator callbacks Method Borrowing this keyword and arrow functions rest operator - args functions p1 rest operator - args functions p2 for of loop with index and entries callback functions explained version 1 callback functions explained version 2 Form and value IF Element shorthand function as a callback inside a higher order function Using param for symbol remove 'px' from number scrolling behaviour test 1 clearing event listeners new URL applying css vars scroll behaviours testing intersection observer intersection observer with loop JS docs - writing js docs check is key exists call() nested ternary with function forEach with function and ...args using template literals filter duplicates get class by indexOf returning ternary operator remove children from parent bootstrap rows with cols fetching multple data endpoints Promise.all

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#html #javascript #jsfunctions #dom #dommanipulation

How to change any attribute of a HTML element

<html>	
   
   <input id="contact" name="address">
 
 <script>

    document.getElementById("contact").attribute = "phone";
	
    //ALTERNATIVE METHOD TO CHANGE
    document.getElementById("contact").setAttribute('name', 'phone');	

  </script>

</html>

#html #javascript #dom #dommanipulation

innerHTML - How to get or change the inside of a HTML element

<html>	
	<div id="target">
    	<p>This is some text</p>
    </div>

  <script>

    //GET
      var divElement = document.getElementById("target").innerHTML;

    //CHANGE
      var heading = '<h1>Example text</h1>';
      document.getElementById("target").innerHTML = heading;

    //TO MAKE DIV EMPTY
        document.getElementById("target").innerHTML = '';

  </script>
  
</html>

#javascript #array #random #randomarray #dom

Generate Random Number without repetition

let clickMe = document.querySelector('button');

function getRandomNumber(min, max) {
  let totalEle = max - min + 1;
  let result = Math.floor(Math.random() * totalEle) + min;
  return result;
}
function createArrayOfNumber(start, end) {
  let myArray = [];
  for (let i = start; i <= end; i++) {
    myArray.push(i);
  }
  return myArray;
}
let numbersArray = createArrayOfNumber(1, 10);

clickMe.addEventListener('click', () => {
  if (numbersArray.length === 0) {
    console.log('No more random number');
    return;
  }
  let randomIndex = getRandomNumber(0, numbersArray.length - 1);
  let randomNumber = numbersArray[randomIndex];
  numbersArray.splice(randomIndex, 1);
  console.log(randomNumber);
});

#javascript #dom #events #web #client-side #hander

Handler for event «HTML document has been completely loaded and parsed», JavaScript / web / client-side

document.addEventListener('DOMContentLoaded', function (evt) {
  /* ... */
})

#dom #css #inline #getcomputedstyle

remove 'px' from number

let heightStr = '56.54px';

let number = parseFloat(heightStr.replace('px', ''));
console.log(number)

// or on a DOM Element

 const message = document.querySelector('.message-container');
 console.log(getComputedStyle(message).height);
message.style.height =
    Number.parseFloat(getComputedStyle(message).height, 10) + 22.5 + 'px';

#dom #scroll #scrollintoview

scrolling behaviour test 1

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

#scroll #javascript

Scroll into a div with buttons

https://codepen.io/robertostringa/pen/XWKEeRw

#ios #swift #scroll

Scroll To Bottom of TableView

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

#html #css #scroll #animation

Smooth Scrolling - CSS Only

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

#sticky #scroll #sections

Creates a 'Sticky' Scroll effect with sections

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

#js #scroll

Disable page scroll when button clicked

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

#js #scroll #css #setup

Page scroll setup

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

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

#ios #swift #scroll #horizontal #snippet

Horizontal scroll

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

#hooks #scroll

Window Scroll simple

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


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

scrolling behaviour test 1

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

Browse more snippets >>

scrolling behaviour test 1

Save snippets that work from anywhere online with our extensions

Comments

More like this

JS

Browse more snippets >>

Embed code snippet