滾動時部分捕捉
[英]Section snapping whilst scrolling
問題描述
當您滾動頁面到頁面時，我正在嘗試實現頁面/部分捕捉，出於某種原因，class="outer" 似乎干擾了第一頁標題、按鈕和導航欄？ 在我添加“外部”和“頁面”類之前，導航欄是可用的，標題和按鈕也保留在第一頁上，沒有傳遞到其他頁面。 有人知道這個問題是什么嗎？ 感覺這很簡單
html, body { margin: 0; height:100%; width:100%; padding:0; } @media (min-height: 30em) {.section__content > * { opacity: 0; transform: translate3d(0, 4rem, 0); transition: opacity 800ms var(--delay), transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay); } }.is-visible.section__content > * { opacity: 1; transform: translate3d(0, 1rem, 0); }.is-visible.section__img { opacity: 0.75; } section { display: block; background: #CFF; height:100%; width:100%; box-sizing:border-box; scroll-snap-align: center; }.background1 { background: url("IMG-7323.GIF") no-repeat center center; background-size: cover; max-width: 100%; max-height: 100%; height: 100vh; width: 100vw; }.outer { overflow-y:auto; scroll-snap-type: y mandatory; height: 100vh; }.page { scroll-snap-align: start; height: 100vh; } #one { background: #111816; color: #fff; } /* Title section 1 */.glow-on-hover { width: 220px; height: 35px; border: none; outline: none; color: rgb(0, 0, 0); font-weight: bold; font-size: 20px; background: #111; cursor: pointer; position: relative; z-index: 0; border-radius: 10px; }.glow-on-hover:before { content: ""; background: linear-gradient( 45deg, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff ); position: absolute; top: -2px; left: -2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity 0.3s ease-in-out; border-radius: 10px; }.glow-on-hover:active { color: #000; }.glow-on-hover:active:after { background: transparent; }.glow-on-hover:hover:before { opacity: 1; }.glow-on-hover:after { z-index: -1; content: ""; position: absolute; width: 100%; height: 100%; background: rgb(150, 167, 204); left: 0; top: 0; border-radius: 10px; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } h1 { position: relative; font-family: TaylorGothic; font-size: calc(20px + 5vw); font-weight: 700; color: #fff; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 0 0.15em #1da9cc; user-select: none; white-space: nowrap; filter: blur(0.007em); animation: shake 2.5s infinite linear forwards; } @font-face { font-family: TaylorGothic; src: url(TaylorGothic.woff2); } @keyframes shake { 5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% { filter: blur(0.018em); transform: translateY(0.018em) rotate(0deg); } 10%, 30%, 40%, 50%, 70%, 80%, 90% { filter: blur(0.01em); transform: translateY(-0.018em) rotate(0deg); } 20%, 60% { filter: blur(0.03em); transform: translate(-0.018em, 0.018em) rotate(0deg); } 45%, 85% { filter: blur(0.03em); transform: translate(0.018em, -0.018em) rotate(0deg); } 100% { filter: blur(0.007em); transform: translate(0) rotate(-0.5deg); } } @keyframes crack1 { 0%, 95% { transform: translate(-50%, -50%); } 100% { transform: translate(-51%, -48%); } } @keyframes crack2 { 0%, 95% { transform: translate(-50%, -50%); } 100% { transform: translate(-49%, -53%); } } /* for the heading and the button alignment*/.btn-centering { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* section one end */ #two { background: #123037; color: #fff; font-size: 30px; } #three { background: #74BE98; font-size: 30px; } #four { background: #BED28D; font-size: 30px; } #five { background: #95211D; color: #fff; font-size: 30px; } nav { position: fixed; } nav a { display: block; font-size: 12px; color: #FFF; text-align: center; background: #000; padding: 10px; margin: 3px; }
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length? target: $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); </script> </head> <body> <nav> <a href="#one">one</a> <a href="#two">two</a> <a href="#three">three</a> <a href="#four">four</a> <a href="#five">five</a> </nav> <div class="outer"> <section id="one" > <div class="page"> <div class="background1"></div> <.-- Title --> <div class="btn-centering"> <h1 data-text="black mirror"><span>Ghosted</span></h1> <button class="glow-on-hover" onclick="location.href='products.html'" type="button"> View Products</button></div> <!-- Socail media buttons --> </section> <section id="two">Page 2 <div class="page"></div> </section> <section id="three">Page 3 <div class="page"></div> </section> <section id="four">Page 4 <div class="page"></div> </section> <section id="five">Page 5 <div class="page"></div> </section> </div> </body> </html>
1 個解決方案
解決方案1
0 2022-12-31 18:22:27
兩件事情，
因為btn-centering沒有包含在任何position: relative元素中，所以它的行為類似於position: fixed ，它以前對你有用，因為.outer沒有overflow ， overflow也會影響位置
另一件事是你已經添加了overflow-y: auto到.outer所以它現在有滾動而body沒有，但是在 jquery 中，你試圖滾動 body。
- 我添加了相對於第一個
.section的.page元素 - 我已將
z-index: 1添加到.nav中，因為相關元素正在影響.nav - 我已經將
$('html,body').animate更改為$('.outer').animate
html, body { margin: 0; height: 100%; width: 100%; padding: 0; }.relative { position: relative; } @media (min-height: 30em) {.section__content>* { opacity: 0; transform: translate3d(0, 4rem, 0); transition: opacity 800ms var(--delay), transform 800ms cubic-bezier(0.13, 0.07, 0.26, 0.99) var(--delay); } }.is-visible.section__content>* { opacity: 1; transform: translate3d(0, 1rem, 0); }.is-visible.section__img { opacity: 0.75; } section { display: block; background: #CFF; height: 100%; width: 100%; box-sizing: border-box; scroll-snap-align: center; }.background1 { background: url("IMG-7323.GIF") no-repeat center center; background-size: cover; max-width: 100%; max-height: 100%; height: 100vh; width: 100vw; }.outer { overflow-y: auto; scroll-snap-type: y mandatory; height: 100vh; }.page { scroll-snap-align: start; height: 100vh; } #one { background: #111816; color: #fff; } /* Title section 1 */.glow-on-hover { width: 220px; height: 35px; border: none; outline: none; color: rgb(0, 0, 0); font-weight: bold; font-size: 20px; background: #111; cursor: pointer; position: relative; z-index: 0; border-radius: 10px; }.glow-on-hover:before { content: ""; background: linear-gradient( 45deg, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff, #969594, #ffffff); position: absolute; top: -2px; left: -2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity 0.3s ease-in-out; border-radius: 10px; }.glow-on-hover:active { color: #000; }.glow-on-hover:active:after { background: transparent; }.glow-on-hover:hover:before { opacity: 1; }.glow-on-hover:after { z-index: -1; content: ""; position: absolute; width: 100%; height: 100%; background: rgb(150, 167, 204); left: 0; top: 0; border-radius: 10px; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } } h1 { position: relative; font-family: TaylorGothic; font-size: calc(20px + 5vw); font-weight: 700; color: #fff; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 0 0.15em #1da9cc; user-select: none; white-space: nowrap; filter: blur(0.007em); animation: shake 2.5s infinite linear forwards; } @font-face { font-family: TaylorGothic; src: url(TaylorGothic.woff2); } @keyframes shake { 5%, 15%, 25%, 35%, 55%, 65%, 75%, 95% { filter: blur(0.018em); transform: translateY(0.018em) rotate(0deg); } 10%, 30%, 40%, 50%, 70%, 80%, 90% { filter: blur(0.01em); transform: translateY(-0.018em) rotate(0deg); } 20%, 60% { filter: blur(0.03em); transform: translate(-0.018em, 0.018em) rotate(0deg); } 45%, 85% { filter: blur(0.03em); transform: translate(0.018em, -0.018em) rotate(0deg); } 100% { filter: blur(0.007em); transform: translate(0) rotate(-0.5deg); } } @keyframes crack1 { 0%, 95% { transform: translate(-50%, -50%); } 100% { transform: translate(-51%, -48%); } } @keyframes crack2 { 0%, 95% { transform: translate(-50%, -50%); } 100% { transform: translate(-49%, -53%); } } /* for the heading and the button alignment*/.btn-centering { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* section one end */ #two { background: #123037; color: #fff; font-size: 30px; } #three { background: #74BE98; font-size: 30px; } #four { background: #BED28D; font-size: 30px; } #five { background: #95211D; color: #fff; font-size: 30px; } nav { position: fixed; z-index: 1; } nav a { display: block; font-size: 12px; color: #FFF; text-align: center; background: #000; padding: 10px; margin: 3px; }
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length? target: $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('.outer').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); </script> </head> <body> <nav> <a href="#one">one</a> <a href="#two">two</a> <a href="#three">three</a> <a href="#four">four</a> <a href="#five">five</a> </nav> <div class="outer"> <section id="one"> <div class="page relative"> <div class="background1"></div> <.-- Title --> <div class="btn-centering"> <h1 data-text="black mirror"><span>Ghosted</span></h1> <button class="glow-on-hover" onclick="location.href='products.html'" type="button"> View Products</button></div> </div> <!-- Socail media buttons --> </section> <section id="two">Page 2 <div class="page"></div> </section> <section id="three">Page 3 <div class="page"></div> </section> <section id="four">Page 4 <div class="page"></div> </section> <section id="five">Page 5 <div class="page"></div> </section> </div> </body> </html>
同時使用鍵盤事件進行滾動和 CSS 滾動捕捉時發生沖突
[英]Conflict when simultaneously using keyboard events for scrolling and CSS scroll snapping
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.