DOM 相关

平滑滚动到指定元素

JS

function slowScrollTo(element, speed = 1000, offset = 0) {
	if (!element) return;
	const targetPosition =
		element.getBoundingClientRect().top + window.pageYOffset + offset;
	const startPosition = window.pageYOffset;
	let distance = targetPosition - startPosition;
	let startTime = null;

	function animation(currentTime) {
		if (startTime === null) startTime = currentTime;
		const timeElapsed = currentTime - startTime;
		const run = easeInOutQuad(timeElapsed, startPosition, distance, speed);
		window.scrollTo(0, run);
		if (timeElapsed < speed) requestAnimationFrame(animation);
	}

	function easeInOutQuad(t, b, c, d) {
		t /= d / 2;
		if (t < 1) return (c / 2) * t * t + b;
		t--;
		return (-c / 2) * (t * (t - 2) - 1) + b;
	}

	requestAnimationFrame(animation);
}

// 例子
const element = document.getElementById('targetElementId');
slowScrollTo(element, 1000, 0);

TS

function slowScrollTo(element: HTMLElement, speed = 1000, offset = 0): void {
	if (!element) return;
	const targetPosition =
		element.getBoundingClientRect().top + window.pageYOffset + offset;
	const startPosition = window.pageYOffset;
	let distance = targetPosition - startPosition;
	let startTime: number | null = null;

	function animation(currentTime: number): void {
		if (startTime === null) startTime = currentTime;
		const timeElapsed = currentTime - startTime;
		const run = easeInOutQuad(timeElapsed, startPosition, distance, speed);
		window.scrollTo(0, run);
		if (timeElapsed < speed) requestAnimationFrame(animation);
	}

	function easeInOutQuad(t: number, b: number, c: number, d: number): number {
		t /= d / 2;
		if (t < 1) return (c / 2) * t * t + b;
		t--;
		return (-c / 2) * (t * (t - 2) - 1) + b;
	}

	requestAnimationFrame(animation);
}

// 举个🌰
const element = document.getElementById('targetElementId') as HTMLElement;
slowScrollTo(element, 1000, 0);

获取滚动位置

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

// 例子
getScrollPosition(); // {x: 0, y: 200}

检查是否见底

JS

function isScrolledToBottom(offset = 0) {
	return (
		document.documentElement.clientHeight + window.scrollY + offset >=
		(document.documentElement.scrollHeight ||
			document.documentElement.clientHeight)
	);
}

// 举个🌰
isScrolledToBottom(); // true or false

TS

function isScrolledToBottom(offset: number = 0): boolean {
	return (
		document.documentElement.clientHeight + window.scrollY + offset >=
		(document.documentElement.scrollHeight ||
			document.documentElement.clientHeight)
	);
}

// 举个🌰
isScrolledToBottom(); // true

判断是否含有某个 class

JS

function hasClass(element, className) {
	if (Array.isArray(className)) {
		for (var i = 0; i < className.length; i++) {
			if (!element.classList.contains(className[i])) {
				return false;
			}
		}

		return true;
	} else {
		return element.classList.contains(className);
	}
}

TS

function hasClass(element: HTMLElement, className: string | string[]): boolean {
	if (Array.isArray(className)) {
		for (const name of className) {
			if (!element.classList.contains(name)) {
				return false;
			}
		}

		return true;
	} else {
		return element.classList.contains(className);
	}
}

添加 class

JS

function addClass(element, classNames) {
	if (!element) return;

	if (typeof classNames === 'string') {
		classNames = classNames.split(' ');
	}

	classNames.forEach(function (className) {
		element.classList.add(className);
	});
}

TS

function addClass(element: Element, classNames: string | string[]): void {
	if (!element) return;

	if (typeof classNames === 'string') {
		classNames = classNames.split(' ');
	}

	classNames.forEach(function (className: string) {
		element.classList.add(className);
	});
}

移除 class

JS

function removeClass(element, classNames) {
	if (!element) return;

	if (typeof classNames === 'string') {
		classNames = classNames.split(' ');
	}

	classNames.forEach(function (className) {
		element.classList.remove(className);
	});
}

TS

function removeClass(element: Element, classNames: string | string[]): void {
	if (!element) return;

	if (typeof classNames === 'string') {
		classNames = classNames.split(' ');
	}

	classNames.forEach(function (className: string) {
		element.classList.remove(className);
	});
}

监听

JS

export function on(element, event, handler) {
	if (element && event) {
		element.addEventListener(event, handler, false);
	}
}

TS

import { Element, EventListener } from '@types/dom';

function on(element: Element, event: string, handler: EventListener): void {
	if (element && event) {
		element.addEventListener(event, handler, false);
	}
}

移除监听

JS

export function off(element, event, handler) {
	if (element && event) {
		element.removeEventListener(event, handler, false);
	}
}

TS

import { Element, EventListener } from '@types/dom';

function on(element: Element, event: string, handler: EventListener): void {
	if (element && event) {
		element.removeEventListener(event, handler, false);
	}
}