CSS overscroll-behavior ਪ੍ਰਾਪਰਟੀ

定义和用法

overscroll-behavior 属性用于在尝试滚动超出滚动边界时，关闭元素的滚动链（scroll chaining）或过度滚动反馈（overscroll affordance）。

滚动链：当在一个元素上过度滚动时，会导致父元素的滚动行为。这是默认行为。

ਓਵਰਸਕ੍ਰੋਲ ਫੀਡਬੈਕ: ਜਦੋਂ ਸਰੋਤਰੀ ਬੰਦਰੀ ਤੋਂ ਸਰੋਤਰੀ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਉਸ ਸਮੇਂ ਯੂਜ਼ਰ ਨੂੰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਣ ਵਾਲਾ ਫੀਡਬੈਕ।ਉਦਾਹਰਨ ਵਜੋਂ, ਮੋਬਾਇਲ ਉਪਕਰਣ 'ਤੇ ਪੰਨੇ ਦੀ ਸਿਰਫ਼ ਉੱਪਰ ਤੋਂ ਸਰੋਤਰੀ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਆਮ ਤੌਰ 'ਤੇ ਵਿਜੂਅਲ ਫੀਡਬੈਕ ਅਤੇ ਪੰਨੇ ਨੂੰ ਤਾਜ਼ਾ ਕਰਨ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।

overscroll-behavior ਇਹ ਗੁਣ ਹੇਠ ਲਿਖੇ ਗੁਣਾਂ ਦੇ ਸ਼ਾਬਦਿਕ ਰੂਪ ਹਨ:

overscroll-behavior ਗੁਣ ਦੇ ਮੁੱਲ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਸੈਟ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ:

ਜੇਕਰ overscroll-behavior ਗੁਣ ਵਿੱਚ ਦੋ ਮੁੱਲ ਹਨ ਤਾਂ:

overscroll-behavior: none contain;
  • ਏਕਸ ਦਿਸ਼ਾ: ਓਵਰਸਕ੍ਰੋਲ ਵਿਹਾਰ ਨਹੀਂ
  • ਉਚਾਈ ਦਿਸ਼ਾ: ਨਹੀਂ ਸਕ੍ਰੋਲ ਲਿੰਕ, ਪਰ ਓਵਰਸਕ੍ਰੋਲ ਰਿਫਲੈਕਸ ਨੂੰ ਸਪੋਰਟ ਕਰੋ

ਜੇਕਰ overscroll-behavior ਗੁਣ ਵਿੱਚ ਇੱਕ ਮੁੱਲ ਹੈ ਤਾਂ:

overscroll-behavior: contain;
  • ਏਕਸ ਅਤੇ ਉਚਾਈ ਦਿਸ਼ਾ: ਨਹੀਂ ਸਕ੍ਰੋਲ ਲਿੰਕ, ਪਰ ਓਵਰਸਕ੍ਰੋਲ ਰਿਫਲੈਕਸ ਨੂੰ ਸਪੋਰਟ ਕਰੋ

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਕੰਮ ਕਰਨ ਵਾਲੇ <div> ਏਲੀਮੈਂਟ ਦੇ ਸਕ੍ਰੋਲ ਲਿੰਕ ਨੂੰ ਬੰਦ ਕਰੋ:

#yellowDiv {
  overscroll-behavior: contain;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 2: ਦੋ ਮੁੱਲ ਗਰੇਫਿਕਸਿਜ਼਼:

ਇਹ ਸਮਾਨਤਾ ਸੈਟ ਕਰੋ: overscroll-behavior ਗੁਣ ਮੁੱਲ ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ: auto none،ਜਿਥੇ ਪਰਵਾਹ ਹੈ ਦਿਸ਼ਾ ਵਿੱਚ ਓਵਰਸਕ੍ਰੋਲ ਰਿਫਲੈਕਸ ਅਤੇ ਸਕ੍ਰੋਲ ਲਿੰਕ ਨੂੰ ਸਪੋਰਟ ਕਰੋ, ਪਰ ਉਚਾਈ ਦਿਸ਼ਾ ਵਿੱਚ ਨਹੀਂ ਸਪੋਰਟ ਕਰੋ:

#pinkDiv {
  overscroll-behavior: auto none;
}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

CSS ਗਰੇਫਿਕਸਿਜ਼਼

overscroll-behavior: auto|contain|none|initial|inherit;

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
auto ਸਕ੍ਰੋਲ ਲਿੰਕ ਅਤੇ ਓਵਰਸਕ੍ਰੋਲ ਰਿਫਲੈਕਸ ਵਿਹਾਰ ਨੂੰ ਸਪੋਰਟ ਕਰੋ। ਮੂਲ ਮੁੱਲ
contain ਓਵਰਸਕ੍ਰੋਲ ਰਿਫਲੈਕਸ ਵਿਹਾਰ ਨੂੰ ਸਪੋਰਟ ਕਰੋ, ਪਰ ਸਕ੍ਰੋਲ ਲਿੰਕ ਨਹੀਂ ਸਪੋਰਟ ਕਰੋ
none ਨਹੀਂ ਕਰਨ ਲਈ ਓਵਰਸਕ੍ਰੋਲ ਰਿਫਲੈਕਸ ਜਾਂ ਸਕ੍ਰੋਲ ਲਿੰਕ ਵਿਹਾਰ
initial ਇਸ ਗੁਣ ਨੂੰ ਉਸ ਦੇ ਮੂਲ ਮੁੱਲ ਤੇ ਸੈਟ ਕਰੋ। ਦੇਖੋ: initial。
inherit ਇਸ ਗੁਣ ਨੂੰ ਆਪਣੇ ਮਾਤਾ ਏਲੀਮੈਂਟ ਤੋਂ ਮੁਲਾਕਾਤੀ ਕਰੋ। ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲ ਮੁੱਲ: auto
ਮੁਲਾਕਾਤੀ ਪ੍ਰਕਿਰਿਆ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਨਿਰਮਾਣ: ਨਹੀਂ ਸਪੋਰਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਜ਼ਰੂਰਤ ਵਾਲਾ ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧਤ ਗੁਣ。
ਵਰਜਨ: CSS3
ਜਾਵਾਸਕ੍ਰਿਪਟ ਗਰੇਫਿਕਸਿਜ਼਼: object.style.overscrollBehavior="none"

ਬਰਾਊਜ਼ਰ ਸਪੋਰਟ

ਸਟੇਬਲ ਵਿੱਚ ਦਿਸਾਈ ਨੰਬਰ ਇਹ ਪਹਿਲਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਗੁਣ ਨੂੰ ਸਪੋਰਟ ਕਰਨ ਵਾਲਾ ਬਰਾਊਜ਼ਰ ਵਰਜਨ ਹੈ。

ਚਰਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
63.0 18.0 * 59.0 16.0 50.0

* ਮਾਈਕਰੋਸਾਫਟ ਐਜ਼ ਐਜ਼ ਵਿੱਚ، ਗੁਣ ਮੁੱਲ 'none' ਨੂੰ 'contain' ਦੇ ਰੂਪ ਵਿੱਚ ਹੈਂਡਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ، ਇਹ ਗਲਤ ਹੈ।

ਸਬੰਧਤ ਪੰਨੇ

ਸਲਾਹਦਾਰੀ:CSS overscroll-behavior-x ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਰੀ:CSS overscroll-behavior-y ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਰੀ:CSS scroll-behavior ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਰੀ:CSS scroll-margin ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਰੀ:CSS scroll-padding ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹਦਾਰੀ:CSS scroll-snap-align ਪ੍ਰਾਪਰਟੀ