Menu
I have this page:
<html>
<body>
<div class="app">
<div class="main-panel">
<nav class="navbar"></nav>
<div class="sidenav">
<ul>
<li>First</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>
</div>
<div class="page-container">
<div class="placeholder">
<ul>
<li>First</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>
</div>
<input type="text">
</div>
</div>
</div>
</body>
</html>
And the following css:
html, body {
height: 100%;
width: 100%;
position: fixed;
overflow: visible; }
.app {
background-color: #f4f5f8;
height: 100%;
overflow-x: hidden;
overflow-y: auto; }
.main-panel {
height: 100%;
display: grid;
grid-template-columns: 210px 1fr;
grid-template-rows: 76px 1fr; }
.navbar {
grid-column: 1 / 3; }
.page-container {
overflow-y: auto;
overflow-x: hidden; }
.placeholder {
display: block;
height: 500px;
width: 100%; }
Also available at: https://jsfiddle.net/1vk5jcuL/
On Safari 12.1 (MacOS and iOS), if you scroll down the main body and hover/focus over the input, it will automatically scroll to top.
I would like to keep the scrolling behavior the same (i.e. when you scroll you scroll only the main panel, not the side-nav, but safari shouldn't scroll to top on input focus.
This problem is purely about HTML + CSS, so no JS involved.
Edit: this is a GIF recording of it happening: https://imgur.com/a/hPD9YuP
959
Change Mouse Settings Step 1: Press Win + I at the same time to open the Windows Settings interface. Step 2: Navigate to Devices > Mouse. Step 3: Disable the option of Scroll inactive windows when I hover over them. Then, see if the issue of Windows 10 uncontrollable scrolling is fixed.
Go to Settings and tap Accessibility. Turn on the feature, then use the slider to select a sensitivity level.
Replace 1fr with minmax(0, 1fr) @helios. it worked for me. Here is the full explanation of it. https://css-tricks.com/preventing-a-grid-blowout/. I tested with your fiddle. it worked fine.
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
