120 lines
No EOL
3.8 KiB
HTML
120 lines
No EOL
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html class="notranslate" translate="no">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<style>
|
|
/* html, body {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 2048px;
|
|
box-sizing: border-box;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #79394f;
|
|
color: #fff;
|
|
font-family: sans-serif;
|
|
} */
|
|
|
|
#layoutViewport {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
visibility: hidden;
|
|
}
|
|
#bottombar {
|
|
position: fixed;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: -20px;
|
|
height: 40px;
|
|
background-color: red;
|
|
transform-origin: left bottom;
|
|
transform: translate(0px, 0px) scale(1);
|
|
}
|
|
</style>
|
|
|
|
<title style="display: none;">test</title>
|
|
</head>
|
|
|
|
<body>
|
|
<textarea id="text" rows="10" style="width: 100%; box-sizing: border-box;" onclick="">test</textarea>
|
|
|
|
<div id="bottombar">This stays stuck to the visual viewport</div>
|
|
<div id="forcescrolling"></div>
|
|
<div id="layoutViewport"></div>
|
|
|
|
<script>
|
|
// setInterval(() => {
|
|
// let docHeight = document.documentElement.clientHeight
|
|
// // docHeight = window.innerHeight
|
|
// let kbHeight = docHeight - window.visualViewport.height
|
|
|
|
// // relative to ICB
|
|
// // window.visualViewport.pageTop
|
|
|
|
// // relative to LayoutViewport
|
|
// // window.visualViewport.offsetTop
|
|
|
|
// // kbHeight -= 1
|
|
|
|
// // document.getElementById('text').style.height = (window.visualViewport.height - kbHeight) + 'px'
|
|
// // document.getElementById('shelf').style.top = window.visualViewport.height + window.visualViewport.pageTop - 32 + 'px'
|
|
|
|
// // document.getElementById('shelf').style.top = window.visualViewport.pageTop + 'px'
|
|
// // document.getElementById('shelf').style.height = window.visualViewport.height + 'px'
|
|
// }, 60)
|
|
|
|
// window.visualViewport.addEventListener('resize', () => {
|
|
// document.getElementById('shelf').style.top = window.visualViewport.height - 32 + 'px'
|
|
// })
|
|
|
|
// // on scroll
|
|
// window.visualViewport.addEventListener('scroll', () => {
|
|
// })
|
|
|
|
// function selectText() {
|
|
// // flash the textarea to stop ios from scrolling
|
|
// let textarea = document.querySelector('textarea')
|
|
// textarea.style.display = 'none'
|
|
// setTimeout(() => {
|
|
// textarea.style.display = 'block'
|
|
// // select the text
|
|
// textarea.select()
|
|
// }, 10)
|
|
// }
|
|
|
|
const bottomBar = document.getElementById("bottombar");
|
|
const layoutViewport = document.getElementById("layoutViewport");
|
|
|
|
let pendingUpdate = false;
|
|
function viewportHandler(event) {
|
|
if (pendingUpdate) return;
|
|
pendingUpdate = true;
|
|
|
|
requestAnimationFrame(() => {
|
|
pendingUpdate = false;
|
|
|
|
// Since the bar is position: fixed we need to offset it by the
|
|
// visual viewport's offset from the layout viewport origin.
|
|
const viewport = event.target;
|
|
const offsetLeft = viewport.offsetLeft;
|
|
const offsetTop =
|
|
viewport.height -
|
|
layoutViewport.getBoundingClientRect().height +
|
|
viewport.offsetTop;
|
|
|
|
// You could also do this by setting style.left and style.top if you
|
|
// use width: 100% instead.
|
|
bottomBar.style.transform = `translate(${offsetLeft}px, ${offsetTop}px) scale(${
|
|
1 / viewport.scale
|
|
})`;
|
|
});
|
|
}
|
|
window.visualViewport.addEventListener('scroll', viewportHandler);
|
|
window.visualViewport.addEventListener('resize', viewportHandler);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |