![\"css](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/175329587484037.jpeg\")
![\"css](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/175329587772294.jpeg\")
\n<\/li>\n
CSS Scroll Snap can achieve scroll adsorption effect. 1. Use scroll-snap-type: x mandatory adsorption in the horizontal direction; 2. Set scroll-snap-align: start to align the start position for child elements; 3. Make sure each item is full of container width through flex: 0 0 100%; 4. Can be expanded to vertical scrolling, set overflow-y: scroll and height: 100vh to achieve full screen scrolling; 5. Add::-webkit-scrollbar { display: none } Hide scrollbars to improve aesthetics. It supports keyboard and touch operations natively, does not require JavaScript, and is compatible with modern browsers. It is suitable for carousel diagrams, paging or full screen page scrolling scenarios.
CSS Scroll Snap is a very practical feature that allows scrolling containers to "suck" specific sub-elements when scrolling. It is often used to create carousels, paging content, or full-screen scrolling pages. Here is a simple but complete CSS Scroll Snap example to help you get started quickly.
? Basic horizontal rolling adsorption example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>CSS Scroll Snap Example</title>
<style>
/* Container is set to scrollable and scroll snap is enabled */
.container {
display: flex;
overflow-x: scroll; /* horizontal scroll*/
scroll-snap-type: x mandatory; /* Forced adsorption along the x-axis*/
scroll-behavior: smooth; /* Optional: smooth scroll*/
white-space: nowrap; /* Prevent child elements from wrapping*/
width: 100%;
height: 200px;
margin: 0;
padding: 0;
-webkit-overflow-scrolling: touch; /* iOS Smooth scrolling*/
}
/* Set adsorption point for child items*/
.item {
flex: 0 0 100%; /* Each item takes up the container width and does not stretch and contract */
height: 200px;
scroll-snap-align: start; /* Align to the starting position when scrolling*/
background-color: #f0f0f0;
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #333;
}
/* Different colors are easy to distinguish*/
.item:nth-child(odd) {
background-color: #cce7ff;
}
.item:nth-child(even) {
background-color: #e0f8e0;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Section 1</div>
<div class="item">Section 2</div>
<div class="item">Section 3</div>
<div class="item">Section 4</div>
</div>
</body>
</html>? Key points description
1. scroll-snap-type: x mandatory;
-
xmeans that adsorption is enabled in the horizontal direction. -
mandatorymeans that when scrolling stops, a snap point must be attached (if the user scrolls halfway, the browser will automatically scroll to the nearest alignment point). -
proximitycan also be used to adsorption more "loose".
2. scroll-snap-align: start;
- The start edge of the child element is aligned to the start edge of the container.
- In horizontal scrolling, it is left alignment.
- You can also use
centerto achieve center adsorption (commonly used in carousel images).
For example:
scroll-snap-align: center;flex: 0 0 80%;centered carousel can be realized.
3. flex: 0 0 100%
- Make sure that each child is fixed to 100% of the container's width, without wrapping or scaling.
-
white-space: nowrapcooperates withflexlayout to prevent line wrapping.
? Common variants: vertical full screen scrolling
.container {
display: block;
overflow-y: scroll;
scroll-snap-type: y mandatory;
height: 100vh;
}
.item {
height: 100vh;
scroll-snap-align: start;
}Suitable for full-screen web page scrolling (such as the official website introduction page).
? Tips
Add scroll bar to hide (beautiful):
.container::-webkit-scrollbar { display: none; } .container { -ms-overflow-style: none; scrollbar-width: none; }-
Supports keyboard/mouse scrolling adsorption: native support, no JS required.
Good mobile compatibility (modern browsers support it).
Basically that's it. Use CSS Scroll Snap to do simple carousel or pagination scrolling without JavaScript , good performance and clear semantics.
The above is the detailed content of css scroll snap example. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
VSCode settings.json location
Aug 01, 2025 am 06:12 AM
The settings.json file is located in the user-level or workspace-level path and is used to customize VSCode settings. 1. User-level path: Windows is C:\Users\\AppData\Roaming\Code\User\settings.json, macOS is /Users//Library/ApplicationSupport/Code/User/settings.json, Linux is /home//.config/Code/User/settings.json; 2. Workspace-level path: .vscode/settings in the project root directory
How to handle transactions in Java with JDBC?
Aug 02, 2025 pm 12:29 PM
To correctly handle JDBC transactions, you must first turn off the automatic commit mode, then perform multiple operations, and finally commit or rollback according to the results; 1. Call conn.setAutoCommit(false) to start the transaction; 2. Execute multiple SQL operations, such as INSERT and UPDATE; 3. Call conn.commit() if all operations are successful, and call conn.rollback() if an exception occurs to ensure data consistency; at the same time, try-with-resources should be used to manage resources, properly handle exceptions and close connections to avoid connection leakage; in addition, it is recommended to use connection pools and set save points to achieve partial rollback, and keep transactions as short as possible to improve performance.
python itertools combinations example
Jul 31, 2025 am 09:53 AM
itertools.combinations is used to generate all non-repetitive combinations (order irrelevant) that selects a specified number of elements from the iterable object. Its usage includes: 1. Select 2 element combinations from the list, such as ('A','B'), ('A','C'), etc., to avoid repeated order; 2. Take 3 character combinations of strings, such as "abc" and "abd", which are suitable for subsequence generation; 3. Find the combinations where the sum of two numbers is equal to the target value, such as 1 5=6, simplify the double loop logic; the difference between combinations and arrangement lies in whether the order is important, combinations regard AB and BA as the same, while permutations are regarded as different;
Mastering Dependency Injection in Java with Spring and Guice
Aug 01, 2025 am 05:53 AM
DependencyInjection(DI)isadesignpatternwhereobjectsreceivedependenciesexternally,promotingloosecouplingandeasiertestingthroughconstructor,setter,orfieldinjection.2.SpringFrameworkusesannotationslike@Component,@Service,and@AutowiredwithJava-basedconfi
python pytest fixture example
Jul 31, 2025 am 09:35 AM
fixture is a function used to provide preset environment or data for tests. 1. Use the @pytest.fixture decorator to define fixture; 2. Inject fixture in parameter form in the test function; 3. Execute setup before yield, and then teardown; 4. Control scope through scope parameters, such as function, module, etc.; 5. Place the shared fixture in conftest.py to achieve cross-file sharing, thereby improving the maintainability and reusability of tests.
Python for Data Engineering ETL
Aug 02, 2025 am 08:48 AM
Python is an efficient tool to implement ETL processes. 1. Data extraction: Data can be extracted from databases, APIs, files and other sources through pandas, sqlalchemy, requests and other libraries; 2. Data conversion: Use pandas for cleaning, type conversion, association, aggregation and other operations to ensure data quality and optimize performance; 3. Data loading: Use pandas' to_sql method or cloud platform SDK to write data to the target system, pay attention to writing methods and batch processing; 4. Tool recommendations: Airflow, Dagster, Prefect are used for process scheduling and management, combining log alarms and virtual environments to improve stability and maintainability.
How to work with Calendar in Java?
Aug 02, 2025 am 02:38 AM
Use classes in the java.time package to replace the old Date and Calendar classes; 2. Get the current date and time through LocalDate, LocalDateTime and LocalTime; 3. Create a specific date and time using the of() method; 4. Use the plus/minus method to immutably increase and decrease the time; 5. Use ZonedDateTime and ZoneId to process the time zone; 6. Format and parse date strings through DateTimeFormatter; 7. Use Instant to be compatible with the old date types when necessary; date processing in modern Java should give priority to using java.timeAPI, which provides clear, immutable and linear
Understanding the Java Virtual Machine (JVM) Internals
Aug 01, 2025 am 06:31 AM
TheJVMenablesJava’s"writeonce,runanywhere"capabilitybyexecutingbytecodethroughfourmaincomponents:1.TheClassLoaderSubsystemloads,links,andinitializes.classfilesusingbootstrap,extension,andapplicationclassloaders,ensuringsecureandlazyclassloa
