The body of the

  1. Try adding contentEditable = true to div

  2. How do I get the scroll position of the current page?

const getScrollPosition = (el = window) = > ({
  x: el.pageXOffset ! = =undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset ! = =undefined ? el.pageYOffset : el.scrollTop
})

/ / case
getScrollPosition(); // {x: 0, y: 200}
Copy the code
  1. How do I scroll smoothly to the top of the page
const scrollToTop = () = > {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)}}/ / case
scrollToTop()
Copy the code
  1. How do I check if a specified element is visible in the viewport?
const elementIsVisibleInViewport = (el, partiallyVisible = false) = > {
  const { top, left, bottom, right } = el.getBoundingClientRect()
  const { innerHeight, innerWidth } = window
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth
}

/ / case
elementIsVisibleInViewport(el) // Need left and right visibility
elementIsVisibleInViewport(el, true) // Full screen (top, bottom, left, right
Copy the code
  1. How do I determine if the device is a mobile device or a desktop/laptop?
const detectDeviceType = () = >
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    ? 'Mobile'
    : 'Desktop'

/ / case
detectDeviceType() // "Mobile" or "Desktop"
Copy the code
  1. How to create an object that contains the current URL parameters?
const getURLParameters = url= >
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) = > ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
    {}
  )

/ / case
getURLParameters('http://url.com/page?n=Adam&s=Smith') // {n: 'Adam', s: 'Smith'}
getURLParameters('google.com') / / {}
Copy the code
  1. How do I copy strings to the clipboard?
const copyToClipboard = str= > {
	const el = document.createElement('textarea')
	el.value = str
	el.setAttribute('readonly'.' ')
	el.style.position = 'absolute'
	el.style.left = '-9999px'
	document.body.appendChild(el)
	const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false
	el.select()
	document.execCommand('copy')
	document.body.removeChild(el)
	if (selected) {
	  document.getSelection().removeAllRanges()
	  document.getSelection().addRange(selected)
	}
}
/ / case
copyToClipboard('Lorem ipsum')
// 'Lorem ipsum' copied to clipboard
Copy the code
  1. How do I move on to the next GIF after it’s finished?

The IMG tag can be listened on via gif.js (3.8K star)

Official example:

var gif = new GIF({
  workers: 2.quality: 10
});

// add an image element
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});

gif.on('finished'.function(blob) {
  window.open(URL.createObjectURL(blob));
});

gif.render();
Copy the code

Poke jnordberg online Demo. Making. IO/GIF. Js

  1. How to determine if a variable is a custom type in TS
const isType = <T>(param: unknown, judgement: boolean): param is T => judgement
Copy the code

Example:

type testT = {
	propsA: string
    	propsB: string
}
const a = { propsA: 'test' }
console.log(isType<testT>(a, a.hasOwnProperty('propsA'))) // true
Copy the code