CSS స్క్రోల్-స్నాప్-అలయిన్ అట్రిబ్యూట్

నిర్వచనం మరియు ఉపయోగం

scroll-snap-align అనునాదు ప్రారంభించినప్పుడు కేంద్రంపై సబ్సిప్షన్ అనునాదు ప్రారంభించాలి

స్క్రాల్ సబ్సిప్షన్ ప్రవర్తనను అమలు చేయడానికి, పిల్ల కేంద్రాలపై అమర్చు అనునాదు ప్రారంభించాలి scroll-snap-align అనునాదు, మరియు ప్రాతినిధ్య కేంద్రంపై అమర్చు scroll-snap-type 属性。

实例

例子 1

当用户停止滚动时，使最近的元素吸附到中心位置：

div {
  scroll-snap-align: center;
}

స్వయంగా ప్రయత్నించండి

例子 2：图片库

scroll-snap-align 属性非常适合用于滚动浏览图片库。在这里，滚动方向是水平的，吸附对齐方式是居中。当用户松开滚动条时，最近的图片将吸附到可滚动区域的中间位置。尝试点击一张图片，然后使用左右箭头键滚动浏览它们：

#container > img {
  scroll-snap-align: none center;
}
బీజింగ్ నర్తకుడు వుహాన్ ట్యూలిప్ హాంగ్జో

స్వయంగా ప్రయత్నించండి

alley bridge in jungle mountains man with camera Cinque Terre

例子 3：在块方向上垂直对齐吸附位置

అడుగుపెడుతున్నప్పుడు పెరించు చేస్తున్నారు ఉన్నప్పుడుscroll-snap-align లక్షణాన్ని బ్లాక్ సూచిక దిశలో కెటాయిడాల ప్రారంభ స్థానంలో అమర్చవచ్చు:

#container > div {
  scroll-snap-align: start none;
}

స్వయంగా ప్రయత్నించండి

CSS సంకేతాలు

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

లక్షణానికి విలువ

విలువ వర్ణన
none స్క్రాల్ సమాధానం లేదు. అప్రమేయ విలువ.
start x మరియు y అక్షాలపై, కెటాయిడాల ప్రారంభ ప్రాంతంలో స్క్రాల్ సమాధానం జరుగుతుంది.
end x మరియు y అక్షాలపై, కెటాయిడాల ముగింపు ప్రాంతంలో స్క్రాల్ సమాధానం జరుగుతుంది.
center x మరియు y అక్షాలపై, కెటాయిడాల కేంద్రంలో స్క్రాల్ సమాధానం జరుగుతుంది.
బ్లాక్ ఇన్లైన్ ద్విముఖ సంకేతాల విధానం. మొదటి విలువ బ్లాక్ సూచిక దిశలో అటువంటి సమాధానాన్ని నిర్దేశిస్తుంది, రెండవ విలువ లైనర్ సూచిక దిశలో అటువంటి సమాధానాన్ని నిర్దేశిస్తుంది.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు అమర్చండి. దయచేసి ఈ లింక్ ను సందర్శించండి: initial.
inherit ఈ లక్షణాన్ని తన ముందటి ప్రాణి నుండి పారంపర్యం చేసుకుంది. దయచేసి ఈ లింక్ ను సందర్శించండి: inherit.

సాంకేతిక వివరాలు

అప్రమేయ విలువ none
పారంపర్యం: లేదు
అనిమేషన్ తయారీ: మద్దతు లేదు. దయచేసి ఈ లింక్ ను సందర్శించండి:అనిమేషన్ సంబంధిత లక్షణాలు.
వెర్షన్: CSS3
జావాస్క్రిప్ట్ సంకేతాలు: object.style.scrollSnapAlign="start"

బ్రౌజర్ మద్దతు

పట్టికలోని సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ నిర్దేశిస్తాయి.

క్రోమ్ ఎండ్జీ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
69.0 79.0 68.0 11.0 56.0

సంబంధిత పేజీలు

సూచనలు:CSS స్క్రోల్-స్నాప్-టైప్ అట్రిబ్యూట్