sujeet/safari-mousemoved.html

## safari-mousemoved.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Safari pointer event test</title>
	<style>
		* { box-sizing: border-box; }
		body { margin: 0; height: 100vh; overflow: hidden; font: 16px system-ui, sans-serif; }
		main { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
		section { display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 24px; }
		section + section { border-left: 1px solid #aaa; }
		#list { height: 56px; overflow-y: auto; border: 2px solid #555; outline: none; }
		#list:focus { border-color: #06f; }
		.item { height: 52px; padding: 15px; }
		.item.selected { background: #bcd7ff; }
		#log { min-height: 0; flex: 1; margin: 0; overflow: auto; white-space: pre-wrap; }
	</style>
</head>
<body>
	<main>
		<section>
			<p>Click the item. Keep the pointer still. Press Arrow Down.</p>
			<div id="list" tabindex="0">
                <div class="item">Item 1</div>
                <div class="item">Item 2</div>
                <div class="item">Item 3</div>
            </div>
		</section>
		<section>
			<h2>Events</h2>
			<pre id="log"></pre>
		</section>
	</main>
	<script>
		const list = document.querySelector("#list");
		const log = document.querySelector("#log");
		const items = document.querySelectorAll(".item");
		let selected = 0;

		function select(index) {
			selected = index;
			if (scroll) items[selected].scrollIntoView({ block: "nearest" });
		}

		list.addEventListener("keydown", event => {
			if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
			event.preventDefault();
			log.textContent += `button pressed: ${event.code}, ${event.key}\n`;
			const change = event.key === "ArrowDown" ? 1 : -1;
			select((selected + change + items.length) % items.length);
		});

		list.addEventListener("pointermove", event => {
			log.textContent += `mouse moved: ${event.movementX}, ${event.movementY}\n`;
			log.scrollTop = log.scrollHeight;
		});

		list.addEventListener("pointerdown", () => list.focus());
		select(0);
	</script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Safari pointer event test</title>
	<style>
	* { box-sizing: border-box; }
	body { margin: 0; height: 100vh; overflow: hidden; font: 16px system-ui, sans-serif; }
	main { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
	section { display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 24px; }
	section + section { border-left: 1px solid #aaa; }
	#list { height: 56px; overflow-y: auto; border: 2px solid #555; outline: none; }
	#list:focus { border-color: #06f; }
	.item { height: 52px; padding: 15px; }
	.item.selected { background: #bcd7ff; }
	#log { min-height: 0; flex: 1; margin: 0; overflow: auto; white-space: pre-wrap; }
	</style>
	</head>
	<body>
	<main>
	<section>
	<p>Click the item. Keep the pointer still. Press Arrow Down.</p>
	<div id="list" tabindex="0">
	<div class="item">Item 1</div>
	<div class="item">Item 2</div>
	<div class="item">Item 3</div>
	</div>
	</section>
	<section>
	<h2>Events</h2>
	<pre id="log"></pre>
	</section>
	</main>
	<script>
	const list = document.querySelector("#list");
	const log = document.querySelector("#log");
	const items = document.querySelectorAll(".item");
	let selected = 0;

	function select(index) {
	selected = index;
	if (scroll) items[selected].scrollIntoView({ block: "nearest" });
	}

	list.addEventListener("keydown", event => {
	if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
	event.preventDefault();
	log.textContent += `button pressed: ${event.code}, ${event.key}\n`;
	const change = event.key === "ArrowDown" ? 1 : -1;
	select((selected + change + items.length) % items.length);
	});

	list.addEventListener("pointermove", event => {
	log.textContent += `mouse moved: ${event.movementX}, ${event.movementY}\n`;
	log.scrollTop = log.scrollHeight;
	});

	list.addEventListener("pointerdown", () => list.focus());
	select(0);
	</script>
	</body>
	</html>
No results found