- Services
- Case Studies
- Technologies
- NextJs development
- Flutter development
- NodeJs development
- ReactJs development
- About
- Contact
- Tools
- Blogs
- FAQ
Understanding CSS Scroll-Margin-Top Property
Learn its use cases and available options to control the top margin of scroll snap areas.
Introduction
The scroll-margin-top property in CSS defines the top margin of the scroll snap area, helping to snap an element to a specific position in the scroll container. This feature has been available since July 2019 and works well across many devices and browsers.
Specification
The scroll-margin-top property is part of the CSS Scroll Snap Module Level 1 specification. This module provides precise control over scrolling behavior, allowing elements to snap into place within a scroll container.
Description
The scroll-margin-top property defines the top margin of the scroll snap area. This margin determines the spacing between the top edge of an element and the top of the scroll container when the element snaps into place. It creates extra space above the element, enhancing the visual and functional aspects of scrolling.
The value of scroll-margin-top can be set using length units like pixels (px), ems (em), or other CSS length units. The property also supports global CSS values like inherit, initial, revert, revert-layer, and unset.
Syntax
/* <length> values */scroll-margin-top: 10px;scroll-margin-top: 1em;
/* Global values */scroll-margin-top: inherit;scroll-margin-top: initial;scroll-margin-top: revert;scroll-margin-top: revert-layer;scroll-margin-top: unset;Values
Length Values
px(pixels):scroll-margin-top: 10px;em(relative to the font-size of the element):scroll-margin-top: 1em;rem(relative to the font-size of the root element):scroll-margin-top: 1rem;vh(viewport height):scroll-margin-top: 5vh;
Global Values
inherit:scroll-margin-top: inherit;initial:scroll-margin-top: initial;revert:scroll-margin-top: revert;revert-layer:scroll-margin-top: revert-layer;unset:scroll-margin-top: unset;
Formal Definition
- Initial Value:
0 - Applies To: All elements
- Inherited: No
- Computed Value: Same as specified value
- Animation Type: By computed value type
Browser Compatibility
- Google Chrome: 69+
- Microsoft Edge: 79+
- Firefox: 68+
- Opera: 56+
- Safari: 14.1+
Example
HTML
<!DOCTYPE html><html><head> <style> .container { width: 300px; height: 300px; overflow-y: scroll; scroll-snap-type: y mandatory; border: 1px solid #ccc; }
.section { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; font-size: 20px; color: white; }
.section1 { background-color: #ff6347; scroll-margin-top: 10px; } .section2 { background-color: #4682b4; scroll-margin-top: 20px; } .section3 { background-color: #32cd32; scroll-margin-top: 30px; } .section4 { background-color: #ffd700; scroll-margin-top: 40px; } </style></head><body> <div class="container"> <div class="section section1">Section 1</div> <div class="section section2">Section 2</div> <div class="section section3">Section 3</div> <div class="section section4">Section 4</div> </div></body></html>Explanation
- .container: The scrollable container with a fixed width and height. It uses
scroll-snap-type: y mandatoryto enable mandatory snapping in the vertical direction. - .section: Each section is a child of the container and has a fixed height. The
scroll-snap-align: startproperty ensures that the top of each section aligns with the top of the container when snapping. - .section1, .section2, .section3, .section4: Each section has a different background color and a unique
scroll-margin-topvalue, allowing you to see how the property affects the scrolling behavior.
Additional Resources
- CSS Scroll Snap Documentation: WebsiteUrl
- CSS Scroll Snap Examples: WebsiteUrl
- Related CSS Properties:
scroll-snap-alignscroll-snap-typescroll-padding-top
- Web Development Resources:
- MDN Web Docs: WebsiteUrl
- Google Web Fundamentals: WebsiteUrl
- CSS Tricks: WebsiteUrl
- Learning and Community:
- Stack Overflow: WebsiteUrl
- GitHub: WebsiteUrl
- Dev.to: WebsiteUrl
สร้างเว็บไซต์ 1 เว็บ ต้องใช้งบเท่าไหร่? เจาะลึกทุกองค์ประกอบ website development cost อยากสร้างเว็บไซต์แต่ไม่มั่นใจในเรื่องของงบประมาณ อ่านสรุปเจาะลึกตั้งแต่ดีไซน์, ฟังก์ชัน และการดูแล พร้อมตัวอย่างงบจริงจาก Till it’s done ที่แผนชัด งบไม่บานปลายแน่นอน
Next.js สอน 14 ขั้นตอนเบื้องต้น: สร้างโปรเจกต์แรกใน 30 นาที เริ่มต้นกับ Next.js ใน 14 ขั้นตอนเพียงแค่ 30 นาที พร้อม SSR/SSG และ API Routes ด้วยตัวอย่างโค้ดง่าย ๆ อ่านต่อเพื่อสร้างโปรเจ็กต์แรกได้ทันทีที่นี่
วิธีสมัคร Apple Developer Account เพื่อนำแอปขึ้น App Store ทีละขั้นตอน อยากปล่อยแอปบน App Store ระดับโลก มาอ่านคู่มือสมัคร Apple Developer Account พร้อมเคล็ดลับ TestFlight และวิธีอัปโหลดที่ง่ายในบทความเดียวนี้ได้เลย
TypeScript Interface คืออะไร? อธิบายพร้อมวิธีใช้และข้อแตกต่างจาก Type เรียนรู้วิธีใช้ TypeScript Interface เพื่อสร้างโครงสร้างข้อมูลที่ปลอดภัยและเข้าใจง่าย พร้อมเปรียบเทียบข้อดีข้อแตกต่างกับ Type ที่คุณต้องรู้ ถูกรวมเอาไว้ในบทความนี้แล้ว
Material-UI (MUI) คืออะไร อยากสร้าง UI สวยงามและเป็นมืออาชีพในเวลาอันรวดเร็วใช่ไหม มาทำความรู้จักกับ Material-UI (MUI) ที่ช่วยให้คุณพัฒนาแอปพลิเคชันบน React ได้ง่ายและดูดีในทุกอุปกรณ์
เปรียบเทียบ 3 วิธีติดตั้ง install node js บน Ubuntu: NVM vs NodeSource vs Official Repo แบบไหนดีที่สุด? เรียนรู้วิธีติดตั้ง Node.js บน Ubuntu ด้วย NVM, NodeSource หรือ Official Repo เลือกวิธีที่เหมาะกับความต้องการของคุณ พร้อมเปรียบเทียบ เพื่อการพัฒนาที่มีประสิทธิภาพ! Talk with CEO
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.