我的 css 弄亂了滾動工作正常
[英]My css is messing with the scrolling working properly
問題描述
我有這個設置https://codepen.io/saraLance/pen/LYGevXW我有幾個問題。
-
header覆蓋超過父寬度。 - 滾動工作很奇怪，它似乎在按鈕
play后停止，然后我必須再次滾動。
我試圖修復滾動問題，使header固定position: fixed; width: 100% position: fixed; width: 100% ，但header覆蓋的范圍超過了父 div。
我也不知道為什么screen高度與父screens不同。
理想情況下sit-container應該在header之后，並且header應該是固定的。
div { width: auto; }.screens { background: green; height: 100vh; display: flex; overflow-x: hidden; overflow-y: auto; }.screen { background: red; }.header { border: solid 1px black; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; padding: 12px; background: white; }.sit-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 1rem; overflow: auto; }.strip { width: 100vw; }.view { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 300px; min-width: 300px; animation-delay: 0.2s; overflow-y: scroll; flex-direction: column; }.view-1 { height: 300px; width: 300px; flex: 0 0 auto; margin: 0 auto; margin-top: 1rem; border: solid 1px black; }.button-section { display: flex; flex-direction: column; text-align: center; margin-top: 1rem; width: 100%; }.play-button { height: 1.25rem; display: flex; justify-content: center; align-items: center; color: black; border: 1px solid black; text-decoration: none; padding: 1rem 1.25rem; line-height: 1rem; border-radius: 0.375rem; font-size: 1rem; font-style: normal; font-weight: normal; text-align: center; text-transform: uppercase; margin: 1rem; }.quit-button { color: black; text-decoration: none; font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 1.5rem; border: 1px solid black; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title></title> </head> <body> <div class="screens"> <div class="screen"> <div class="header"> <div class="div-1">Div-1</div> <div class="div-1">Div-2</div> </div> <div class="sit-container"> <div class="strip"> <div class="view"> <div class="view-1">View-1</div> <div class="view-1">View-2</div> <div class="view-1">View-3</div> <div class="view-1">View-4</div> </div> </div> <div class="button-section"> <a class="play-button">Play</a> <a class="quit-button">Quit</a> </div> </div> </div> </div> </body> </html>
1 個解決方案
解決方案1
0 2020-07-04 04:47:08
screens class 應該是width: auto和overflow-x:hidden應該在button-section
全屏見output
div { width: auto; } @media (min-width: 768px) { width:35%; margin:auto; }.screens { background: green; height:"auto"; display: flex; }.screen { background: red; }.header { border: solid 1px black; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; padding: 12px; background: white; }.sit-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 1rem; overflow: auto; }.strip { width: 100vw; @media (min-width: 768px) { width: 35vw; } }.view { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 300px; min-width: 300px; animation-delay: 0.2s; overflow-y: scroll; flex-direction: column; }.view-1{ height: 300px; width: 300px; flex: 0 0 auto; margin: 0 auto; margin-top: 1rem; border: solid 1px black; }.button-section{ display: flex; flex-direction: column; text-align: center; margin-top: 1rem; width: 100%; overflow-x:hidden; }.play-button { height: 1.25rem; display: flex; justify-content: center; align-items: center; color: black; border: 1px solid black; text-decoration: none; padding: 1rem 1.25rem; line-height: 1rem; border-radius: 0.375rem; font-size: 1rem; font-style: normal; font-weight: normal; text-align: center; text-transform: uppercase; margin: 1rem; }.quit-button { color: black; text-decoration: none; font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 1.5rem; border: 1px solid black; }
<div class="screens"> <div class="screen"> <div class="header"> <div class="div-1">Div-1</div> <div class="div-1">Div-2</div> </div> <div class="sit-container"> <div class="strip"> <div class="view"> <div class="view-1">View-1</div> <div class="view-1">View-2</div> <div class="view-1">View-3</div> <div class="view-1">View-4</div> </div> </div> <div class="button-section"> <a class="play-button">Play</a> <a class="quit-button">Quit</a> </div> </div> </div> </div>
滾動時更改CSS（可以在控制台和JSFiddle中工作，但不能在HTML中工作？）
[英]Changing CSS when scrolling (working in console and JSFiddle but not in my HTML?)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.