[英]How to get scroll position of an element when window is not scrollable and scrollbar is hidden?
在滾動時，導航欄后面的內容仍然可見，我希望它在看起來干凈的同時不可見。
一個矩形。 導航欄后面的 div 可以隱藏其下方的內容，但請注意，當文本出現時（初始），粉紅色的 div 在導航欄后面仍然可見（我想在視圖中滾動時將其更改為白色）
* { margin: 0; padding: 0; box-sizing: border-box; color: initial; font-size: 16px; font-family: 'Comfortaa', cursive; scrollbar-width: none; } body { background-color: rgb(252, 241, 239); display: flex; justify-content: center; align-items: center; height: 100vh; } #mobile_size { width: 550px; height: 650px; background-color: black; border-radius: 3%; position: relative; } #mobile_screen { width: 530px; height: 600px; background-color: rgb(252, 241, 239); border-radius: 3%; position: absolute; top: 10px; overflow-y: scroll; left: 10px; overflow-x: hidden; } header { display: flex; padding: 10px; background-color: rgb(252, 248, 248); position: sticky; top: 10px; align-items: center; margin: 10px; border-radius: 15px; justify-content: space-between; box-shadow: 3px 5px 10px rgb(0, 0, 0, .13); z-index: 3; } #gradient_pink { background: rgb(237, 218, 218); background: linear-gradient(180deg, rgba(237, 218, 218, 1) 0%, rgba(252, 241, 239, 1) 21%); position: sticky; top: 0px; width: 140%; height: 10px; z-index: 1; } #gradient_white { background-color: white; position: sticky; top: 0px; width: 140%; height: 10px; z-index: 1; } h1 { margin-left: 10px; font-size: 1.6rem; } h1:hover { cursor: pointer; } ul { margin-right: 20px; list-style: none; } ul, li { font-size: 11px; display: inline; margin: 5px; } a { text-decoration: none; } #img_gallery { display: flex; margin: 10px; margin-top: 30px; border-radius: 10px; background-color: rgb(252, 241, 239); padding: 10px; height: 500px; flex-direction: column; overflow-y: scroll; } img { margin-bottom: 20px; border-radius: 10px; height: 480px; }::-webkit-scrollbar { width: 0; background: transparent; } #about_company { margin-top: 60px; width: 100%; background-color: white; height: auto; } h3 { text-align: center; font-size: 15px; padding-top: 60px; } p { padding: 60px; padding-top: 40px; text-align: justify; } #ig_container { display: flex; margin: 10px; margin-top: 30px; border-radius: 10px; background-color: rgb(250, 236, 233); padding: 10px; height: 500px; flex-direction: column; overflow-y: scroll; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Comfortaa;wght@300:400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min:css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Jino</title> </head> <body> <div id="mobile_size"> <div id="mobile_screen"> <div id="gradient_pink"></div> <.-- <div id="gradient_white"></div> --> <header> <h1 id="name">JINO</h1> <ul> <a href="#"> <li>ABOUT</li> </a> <a href="#"> <li>CONTACT</li> </a> <a href="#"> <li>SERVICES</li> </a> <a href="#"> <li>SHOP</li> </a> </ul> </header> <main> <div id="ig_container"> <div id="img_gallery"> <img src='http?//unsplash:it/g/501.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/502.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/503.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/504.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/505.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/506.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/507.random&gravity=center' alt='' /> <img src='http?//unsplash.it/g/500,random&gravity=center' alt='' /> </div> </div> <div id="about_company"> <h3>THE INCEPTION</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Ullam minus maiores, veritatis fugiat ut, perspiciatis corrupti. nam eius provident molestias nesciunt fuga, Veritatis temporibus tempore dolor est rerum doloribus, qui voluptatibus id veniam, Ipsa architecto eligendi hic fugiat minima at laboriosam sapiente animi nostrum amet minus maiores distinctio quasi est tempore nisi similique voluptate doloremque excepturi? tenetur. eius mollitia, Non, soluta, Culpa dicta quisquam saepe non. Quis ea dolores amet modi magnam maiores porro consequuntur debitis at ex hic necessitatibus minus sunt excepturi quo quasi sed, expedita, sit cupiditate, Tenetur ipsam impedit? sit vel ab velit esse temporibus magnam. Cumque ab quos enim nostrum error, dicta tenetur distinctio repellendus quasi facere labore culpa qui eos dolore. cum, ut atque explicabo alias totam. Nesciunt illum incidunt dignissimos, Illum laudantium neque aliquam. sequi odio laboriosam beatae in enim nulla nostrum tenetur necessitatibus ullam illo perferendis adipisci possimus sapiente nemo, Doloribus iste ipsa voluptates cum reprehenderit officia, nemo totam repudiandae eaque eveniet delectus, Optio dolore cum. nemo aspernatur qui mollitia aliquid officia architecto magnam delectus omnis accusamus velit esse natus molestiae. Modi, distinctio cumque nobis ducimus accusamus quo neque aperiam, tenetur reprehenderit incidunt fugit quaerat provident totam quos, Magni molestias aut alias exercitationem repellendus ut eum et nesciunt ullam corporis illo veniam. laudantium sed quod veritatis velit adipisci sint accusantium vel, Delectus corporis fugiat aperiam dicta accusantium tempore adipisci praesentium voluptas fuga ex, Porro tenetur consequuntur in ipsa cum. numquam iure. facilis ipsam, dignissimos est rerum voluptates eveniet dolor dolorum itaque perspiciatis veniam? Inventore incidunt mollitia delectus iste eligendi tempore aut ex provident error suscipit, adipisci magnam cupiditate hic quis rerum pariatur vitae magni corrupti veritatis assumenda dolore atque. praesentium consequatur quasi, Vitae aperiam nulla minima omnis explicabo, Quibusdam, vel, Consequuntur vitae debitis accusamus accusantium assumenda magni nobis, labore iure illum inventore eaque ullam totam, Praesentium. incidunt, Quisquam itaque ut tenetur nostrum non ratione? consectetur sunt quas ducimus saepe fugit deserunt. ad assumenda. Sit possimus minima fugiat accusamus pariatur, voluptates impedit sapiente nam vel cumque, odio rem natus? tempore consequatur eveniet reiciendis adipisci doloremque dolorum voluptatibus totam amet ab, Ad. minus, Quaerat ratione possimus numquam veniam fugit. Iure tempora delectus deserunt, Hic nisi sed soluta itaque adipisci, facere voluptatibus nesciunt culpa earum deserunt iste magni laboriosam dignissimos blanditiis, ipsa laborum, Sapiente, sequi? Dicta cum debitis magni molestias odio praesentium temporibus voluptatum culpa qui adipisci expedita, quibusdam ad earum tenetur, Tenetur nulla impedit deleniti iusto numquam. dolorem doloribus aliquam molestiae vero aspernatur velit eos, reprehenderit accusamus enim magni quam in libero, Eligendi dolore, fuga placeat dicta aliquam aut laudantium. in temporibus, asperiores enim expedita voluptas alias quasi error harum, Cumque sequi porro labore, nisi minima molestiae tempora. voluptatum sit veniam omnis magnam deleniti esse dolorem expedita tempore eos totam quidem provident officiis vero culpa doloremque quasi delectus. Harum cumque velit dignissimos accusantium qui nesciunt consequuntur error quis sint tenetur et nisi recusandae similique aliquam, ea sapiente, Cum molestias tempore dolorum dolor ullam deleniti architecto distinctio aperiam rem eos. Illo? velit molestiae cum atque cumque vel repellat libero deleniti animi accusamus vitae, Iure, reiciendis, Explicabo suscipit modi incidunt perferendis earum unde reprehenderit quod rerum iste soluta? saepe nulla voluptas, voluptatum, tempora vero eius nisi iure culpa nesciunt distinctio, Dolorum possimus soluta nemo. Molestias odio at tempora hic labore eligendi dolorum beatae deleniti, est facilis nemo. dolore a ad, Doloribus itaque iure quos maiores quidem fugiat, Minus. nobis recusandae pariatur similique saepe repellendus impedit rerum veniam veritatis dolorem facere, laudantium itaque eligendi. magnam odio incidunt exercitationem sapiente asperiores quas, Quidem iste, pariatur blanditiis nostrum nobis earum officia eum laboriosam placeat? at voluptatum labore laborum neque ullam ipsum odit quod. reprehenderit autem sit doloremque recusandae quaerat, Ducimus quaerat totam eius facere, Iure. laborum vel sequi blanditiis veniam quaerat quia, Voluptate modi. cumque quam officia impedit harum, debitis delectus necessitatibus magni officiis culpa obcaecati. Debitis nemo sed eum ullam similique fugiat id, veritatis facere quidem delectus odit nulla dicta aperiam sint ab voluptatibus perspiciatis eos officiis. Doloribus. consequuntur error dicta repellat incidunt unde nemo, corrupti magnam architecto nulla ut similique saepe maxime culpa sit. Ducimus adipisci perferendis commodi. Voluptatibus quam sit. debitis odit recusandae cupiditate, asperiores nisi sint distinctio nulla autem possimus esse nostrum deserunt. Voluptatum nemo sint delectus consequatur, ipsum mollitia, Debitis aliquam consectetur repudiandae commodi ratione est sit inventore aliquid nam blanditiis aperiam distinctio doloremque nihil sed quae voluptatum cum modi, eveniet alias voluptas harum unde, Hic libero error eveniet saepe ab animi laborum adipisci magnam eos incidunt minus? odio molestiae, Debitis cum molestiae reiciendis ipsa, Error nemo ipsum eius explicabo accusantium dolore. voluptatibus et quos laboriosam maxime eum saepe, Exercitationem nam natus delectus placeat doloribus sunt consequatur autem sapiente. Architecto obcaecati quis reiciendis repellat recusandae sequi exercitationem rerum? Ipsa, mollitia. Ipsam, quas. officia voluptatibus repudiandae, eaque eos quis sit voluptas fugiat quae laudantium adipisci tempora ullam magnam dolorem delectus, Natus alias distinctio deserunt laboriosam placeat doloremque vel quis possimus, laudantium accusantium? Consectetur recusandae eaque voluptas eligendi modi vel ratione libero aperiam rem, Sint qui reprehenderit ut. adipisci tenetur minus cumque, iusto quam id quis harum exercitationem aspernatur sit rem eius nobis libero a nam animi laborum esse accusamus illo provident dolor, Repudiandae, aliquam, Et illum itaque eum beatae facilis nihil nam, Voluptatibus nesciunt veritatis voluptate facere autem molestiae ut similique deserunt eligendi odit: Eius error sit ut praesentium voluptate eum ullam modi architecto. sequi quae. Error obcaecati ducimus debitis ratione nam saepe omnis tempore excepturi natus ex exercitationem necessitatibus minus. minima a ipsa ad repellat placeat ipsam culpa sequi dicta. Ea rem tenetur quibusdam illum magni perferendis saepe quasi quisquam. odio amet adipisci. voluptate repellat voluptates impedit facilis expedita aliquam velit officiis. Nemo maxime illo sapiente omnis corporis iusto sunt similique enim beatae itaque quasi pariatur, voluptas impedit consequuntur ipsam iste delectus unde? Sunt, ipsam quasi. Debitis veniam laborum modi sequi accusantium ut fugit reprehenderit rem hic laudantium aperiam illo nulla odit officiis, saepe, architecto voluptas, nam eos iste aliquid vel! Vero dolorem nemo amet eaque fuga illum, sed fugiat, ullam quo iste facere voluptates!</p> </div> <i class="fas fa-chevron-up"></i> </main> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
獲取文本容器元素（inception 和 lorem 文本）的滾動 position 並用粉色/白色隱藏/顯示 div。 但我無法在卷軸 position 中獲取。 ScrollTop 總是返回 0，我試圖遵循這個，但我的 window 不像鏈接的問題那樣可滾動，但它里面的元素是。 我不明白如何考慮它，我錯過了一些關鍵點。 歡迎任何文章或閱讀的鏈接。
部分答案，您可以獲得`$("#ig_container") 的高度並將其與滾動頂部距離進行比較。
我的代碼做到了，但它仍然需要一些改進才能達到你想要的平滑度。
var positionReached = false; $('#mobile_screen').scroll(function(e){ const scrollPosition = $(this).scrollTop(); const containerHeight = $("#ig_container").height(); if(;positionReached && scrollPosition>= containerHeight){ positionReached = true. $("#gradient_pink"),css("background";"white"); }else if(scrollPosition < containerHeight) if(positionReached){ positionReached = false. $("#gradient_pink"),css("background","rgb(237, 218; 218)"); } })
* { margin: 0; padding: 0; box-sizing: border-box; color: initial; font-size: 16px; font-family: 'Comfortaa', cursive; scrollbar-width: none; } body { background-color: rgb(252, 241, 239); display: flex; justify-content: center; align-items: center; height: 100vh; } #mobile_size { width: 550px; height: 650px; background-color: black; border-radius: 3%; position: relative; } #mobile_screen { width: 530px; height: 600px; background-color: rgb(252, 241, 239); border-radius: 3%; position: absolute; top: 10px; overflow-y: scroll; left: 10px; overflow-x: hidden; } header { display: flex; padding: 10px; background-color: rgb(252, 248, 248); position: sticky; top: 10px; align-items: center; margin: 10px; border-radius: 15px; justify-content: space-between; box-shadow: 3px 5px 10px rgb(0, 0, 0, .13); z-index: 3; } #gradient_pink { background: rgb(237, 218, 218); background: linear-gradient(180deg, rgba(237, 218, 218, 1) 0%, rgba(252, 241, 239, 1) 21%); position: sticky; top: 0px; width: 140%; height: 10px; z-index: 1; } #gradient_white { background-color: white; position: sticky; top: 0px; width: 140%; height: 10px; z-index: 1; } h1 { margin-left: 10px; font-size: 1.6rem; } h1:hover { cursor: pointer; } ul { margin-right: 20px; list-style: none; } ul, li { font-size: 11px; display: inline; margin: 5px; } a { text-decoration: none; } #img_gallery { display: flex; margin: 10px; margin-top: 30px; border-radius: 10px; background-color: rgb(252, 241, 239); padding: 10px; height: 500px; flex-direction: column; overflow-y: scroll; } img { margin-bottom: 20px; border-radius: 10px; height: 480px; }::-webkit-scrollbar { width: 0; background: transparent; } #about_company { margin-top: 60px; width: 100%; background-color: white; height: auto; } h3 { text-align: center; font-size: 15px; padding-top: 60px; } p { padding: 60px; padding-top: 40px; text-align: justify; } #ig_container { display: flex; margin: 10px; margin-top: 30px; border-radius: 10px; background-color: rgb(250, 236, 233); padding: 10px; height: 500px; flex-direction: column; overflow-y: scroll; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Comfortaa;wght@300:400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min:css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Jino</title> </head> <body> <div id="mobile_size"> <div id="mobile_screen"> <div id="gradient_pink"></div> <.-- <div id="gradient_white"></div> --> <header> <h1 id="name">JINO</h1> <ul> <a href="#"> <li>ABOUT</li> </a> <a href="#"> <li>CONTACT</li> </a> <a href="#"> <li>SERVICES</li> </a> <a href="#"> <li>SHOP</li> </a> </ul> </header> <main> <div id="ig_container"> <div id="img_gallery"> <img src='http?//unsplash:it/g/501.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/502.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/503.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/504.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/505.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/506.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/507.random&gravity=center' alt='' /> <img src='http?//unsplash.it/g/500,random&gravity=center' alt='' /> </div> </div> <div id="about_company"> <h3>THE INCEPTION</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Ullam minus maiores, veritatis fugiat ut, perspiciatis corrupti. nam eius provident molestias nesciunt fuga, Veritatis temporibus tempore dolor est rerum doloribus, qui voluptatibus id veniam, Ipsa architecto eligendi hic fugiat minima at laboriosam sapiente animi nostrum amet minus maiores distinctio quasi est tempore nisi similique voluptate doloremque excepturi? tenetur. eius mollitia, Non, soluta, Culpa dicta quisquam saepe non. Quis ea dolores amet modi magnam maiores porro consequuntur debitis at ex hic necessitatibus minus sunt excepturi quo quasi sed, expedita, sit cupiditate, Tenetur ipsam impedit? sit vel ab velit esse temporibus magnam. Cumque ab quos enim nostrum error, dicta tenetur distinctio repellendus quasi facere labore culpa qui eos dolore. cum, ut atque explicabo alias totam. Nesciunt illum incidunt dignissimos, Illum laudantium neque aliquam. sequi odio laboriosam beatae in enim nulla nostrum tenetur necessitatibus ullam illo perferendis adipisci possimus sapiente nemo, Doloribus iste ipsa voluptates cum reprehenderit officia, nemo totam repudiandae eaque eveniet delectus, Optio dolore cum. nemo aspernatur qui mollitia aliquid officia architecto magnam delectus omnis accusamus velit esse natus molestiae. Modi, distinctio cumque nobis ducimus accusamus quo neque aperiam, tenetur reprehenderit incidunt fugit quaerat provident totam quos, Magni molestias aut alias exercitationem repellendus ut eum et nesciunt ullam corporis illo veniam. laudantium sed quod veritatis velit adipisci sint accusantium vel, Delectus corporis fugiat aperiam dicta accusantium tempore adipisci praesentium voluptas fuga ex, Porro tenetur consequuntur in ipsa cum. numquam iure. facilis ipsam, dignissimos est rerum voluptates eveniet dolor dolorum itaque perspiciatis veniam? Inventore incidunt mollitia delectus iste eligendi tempore aut ex provident error suscipit, adipisci magnam cupiditate hic quis rerum pariatur vitae magni corrupti veritatis assumenda dolore atque. praesentium consequatur quasi, Vitae aperiam nulla minima omnis explicabo, Quibusdam, vel, Consequuntur vitae debitis accusamus accusantium assumenda magni nobis, labore iure illum inventore eaque ullam totam, Praesentium. incidunt, Quisquam itaque ut tenetur nostrum non ratione? consectetur sunt quas ducimus saepe fugit deserunt. ad assumenda. Sit possimus minima fugiat accusamus pariatur, voluptates impedit sapiente nam vel cumque, odio rem natus? tempore consequatur eveniet reiciendis adipisci doloremque dolorum voluptatibus totam amet ab, Ad. minus, Quaerat ratione possimus numquam veniam fugit. Iure tempora delectus deserunt, Hic nisi sed soluta itaque adipisci, facere voluptatibus nesciunt culpa earum deserunt iste magni laboriosam dignissimos blanditiis, ipsa laborum, Sapiente, sequi? Dicta cum debitis magni molestias odio praesentium temporibus voluptatum culpa qui adipisci expedita, quibusdam ad earum tenetur, Tenetur nulla impedit deleniti iusto numquam. dolorem doloribus aliquam molestiae vero aspernatur velit eos, reprehenderit accusamus enim magni quam in libero, Eligendi dolore, fuga placeat dicta aliquam aut laudantium. in temporibus, asperiores enim expedita voluptas alias quasi error harum, Cumque sequi porro labore, nisi minima molestiae tempora. voluptatum sit veniam omnis magnam deleniti esse dolorem expedita tempore eos totam quidem provident officiis vero culpa doloremque quasi delectus. Harum cumque velit dignissimos accusantium qui nesciunt consequuntur error quis sint tenetur et nisi recusandae similique aliquam, ea sapiente, Cum molestias tempore dolorum dolor ullam deleniti architecto distinctio aperiam rem eos. Illo? velit molestiae cum atque cumque vel repellat libero deleniti animi accusamus vitae, Iure, reiciendis, Explicabo suscipit modi incidunt perferendis earum unde reprehenderit quod rerum iste soluta? saepe nulla voluptas, voluptatum, tempora vero eius nisi iure culpa nesciunt distinctio, Dolorum possimus soluta nemo. Molestias odio at tempora hic labore eligendi dolorum beatae deleniti, est facilis nemo. dolore a ad, Doloribus itaque iure quos maiores quidem fugiat, Minus. nobis recusandae pariatur similique saepe repellendus impedit rerum veniam veritatis dolorem facere, laudantium itaque eligendi. magnam odio incidunt exercitationem sapiente asperiores quas, Quidem iste, pariatur blanditiis nostrum nobis earum officia eum laboriosam placeat? at voluptatum labore laborum neque ullam ipsum odit quod. reprehenderit autem sit doloremque recusandae quaerat, Ducimus quaerat totam eius facere, Iure. laborum vel sequi blanditiis veniam quaerat quia, Voluptate modi. cumque quam officia impedit harum, debitis delectus necessitatibus magni officiis culpa obcaecati. Debitis nemo sed eum ullam similique fugiat id, veritatis facere quidem delectus odit nulla dicta aperiam sint ab voluptatibus perspiciatis eos officiis. Doloribus. consequuntur error dicta repellat incidunt unde nemo, corrupti magnam architecto nulla ut similique saepe maxime culpa sit. Ducimus adipisci perferendis commodi. Voluptatibus quam sit. debitis odit recusandae cupiditate, asperiores nisi sint distinctio nulla autem possimus esse nostrum deserunt. Voluptatum nemo sint delectus consequatur, ipsum mollitia, Debitis aliquam consectetur repudiandae commodi ratione est sit inventore aliquid nam blanditiis aperiam distinctio doloremque nihil sed quae voluptatum cum modi, eveniet alias voluptas harum unde, Hic libero error eveniet saepe ab animi laborum adipisci magnam eos incidunt minus? odio molestiae, Debitis cum molestiae reiciendis ipsa, Error nemo ipsum eius explicabo accusantium dolore. voluptatibus et quos laboriosam maxime eum saepe, Exercitationem nam natus delectus placeat doloribus sunt consequatur autem sapiente. Architecto obcaecati quis reiciendis repellat recusandae sequi exercitationem rerum? Ipsa, mollitia. Ipsam, quas. officia voluptatibus repudiandae, eaque eos quis sit voluptas fugiat quae laudantium adipisci tempora ullam magnam dolorem delectus, Natus alias distinctio deserunt laboriosam placeat doloremque vel quis possimus, laudantium accusantium? Consectetur recusandae eaque voluptas eligendi modi vel ratione libero aperiam rem, Sint qui reprehenderit ut. adipisci tenetur minus cumque, iusto quam id quis harum exercitationem aspernatur sit rem eius nobis libero a nam animi laborum esse accusamus illo provident dolor, Repudiandae, aliquam, Et illum itaque eum beatae facilis nihil nam, Voluptatibus nesciunt veritatis voluptate facere autem molestiae ut similique deserunt eligendi odit: Eius error sit ut praesentium voluptate eum ullam modi architecto. sequi quae. Error obcaecati ducimus debitis ratione nam saepe omnis tempore excepturi natus ex exercitationem necessitatibus minus. minima a ipsa ad repellat placeat ipsam culpa sequi dicta. Ea rem tenetur quibusdam illum magni perferendis saepe quasi quisquam. odio amet adipisci. voluptate repellat voluptates impedit facilis expedita aliquam velit officiis. Nemo maxime illo sapiente omnis corporis iusto sunt similique enim beatae itaque quasi pariatur, voluptas impedit consequuntur ipsam iste delectus unde? Sunt, ipsam quasi. Debitis veniam laborum modi sequi accusantium ut fugit reprehenderit rem hic laudantium aperiam illo nulla odit officiis, saepe, architecto voluptas, nam eos iste aliquid vel! Vero dolorem nemo amet eaque fuga illum, sed fugiat, ullam quo iste facere voluptates!</p> </div> <i class="fas fa-chevron-up"></i> </main> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
如何使用 window.scroll 與水平滾動來獲取元素 position
[英]How to use window.scroll with horizontal scroll to get element position
向下滾動jQuery時如何獲取瀏覽器屏幕窗口的位置
[英]How to get the position of screen window of browser when scroll down jquery
jQuery計算項目在可滾動窗口中的位置並滾動到它
[英]jQuery calculate position of item in scrollable window and scroll to it
jQuery-在沒有固定位置的情況下滾動窗口時防止滾動元素
[英]jQuery - Prevent scroll element when window scrolled without fix position
當頁面動畫到頂部以獲得目標位置時，如何在單擊..時獲得窗口滾動單位
[英]How to get window scroll unit on click .. when a page is animating to top for target position
當滾動位置到達屏幕中的元素位置時如何顯示和轉換？
[英]How to display and transition when scroll position reaches element position in the screen?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.