<div id="wrap">
<input
id='update'
type="button"
value="スクロール後にクリック">
<table>
<thead>
<tr>
<th>property</th>
<th>position</th>
</tr>
</thead>
<tbody>
<tr>
<td>window.scrollX</td>
<td><span id="scrollX"></span>px</td>
</tr>
<tr>
<td>window.scrollY</td>
<td><span id="scrollY"></span>px</td>
</tr>
</tbody>
</table>
</div>
body {
height: 1000px;
width: 3000px;
}
#wrap {
position: fixed;
}
table {
margin-top: 16px;
border-collapse: collapse;
}
table th, table td {
border: solid 1px #ccc;
padding: 4px;
}
update = e => {
document.getElementById('scrollX').textContent = window.scrollX
document.getElementById('scrollY').textContent = window.scrollY
}
btn = document.getElementById('update')
btn.addEventListener(
'click',
e => update(),
false
)
update()
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.