CSS overscroll-behavior 属性

Paglilinaw at paggamit

overscroll-behavior Ang attribute ay ginagamit upang isara ang scroll chaining (scroll chaining) o pag-over scroll feedback (overscroll affordance) ng elemento kapag sinusubukan na ililipat ang pahina sa labas ng hangganan ng paglipat.

Scroll chain: Kapag mayroong pag-over scroll sa isang elemento, ito ay magiging dahilan sa paglipat ng magulang na elemento. Ito ang default na pag-uugali.

Feedback sa pag-over scroll: Ang pagbibigay ng feedback sa user kapag sinusubukan na ililipat ang pahina sa labas ng hangganan ng paglipat. Halimbawa, kapag sinusubukan na ililipat ang pahina sa labas ng itaas ng pahina sa mobile device, ang visual feedback ay ipinapakita at ang pahina ay inirefresh.

overscroll-behavior Ang katangian ay isang shorcut form ng mga sumusunod na katangian:

overscroll-behavior Ang halaga ng katangian ay maaaring itala sa iba't ibang paraan:

Kung ang katangian ng overscroll-behavior ay may dalawang halaga:

overscroll-behavior: none contain;
  • Sa direksyon ng x: walang pagkilos ng pag-over-scroll
  • Sa direksyon ng y: walang scroll chain, ngunit pinapayagan ang feedback ng pag-over-scroll

Kung ang katangian ng overscroll-behavior ay may isang halaga:

overscroll-behavior: contain;
  • Sa direksyon ng x at y: walang scroll chain, ngunit pinapayagan ang feedback ng pag-over-scroll

Sample

Halimbawa 1

I-close ang scroll chain ng elemento na mahihigit na scrollable:

#yellowDiv {
  overscroll-behavior: contain;
}

Subukan nang personal

Halimbawa 2: Grammar ng dalawang halaga:

I-set ang: overscroll-behavior Ang halaga ng katangian ay naitala sa: auto noneAt pinapayagan ang scroll chain at feedback ng pag-over-scroll sa direksyon ng x, ngunit hindi sa direksyon ng y:

#pinkDiv {
  overscroll-behavior: auto none;
}

Subukan nang personal

Grammar ng CSS

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

Halaga ng katangian

Halaga Paglalarawan
auto Pinapayagan ang pagkilos ng scroll chain at feedback ng pag-over-scroll. Default na halaga.
contain Pinapayagan ang feedback ng pag-over-scroll at hindi pinapayagan ang scroll chain.
none Hindi pinapayagan ang feedback ng pag-over-scroll at pagkilos ng scroll chain.
initial I-set ang katangian sa kanyang default na halaga. Tingnan ang: initial.
inherit Mumunukan ang katangian mula sa magulang na elemento. Tingnan ang: inherit.

Detalye ng teknolohiya

Default na halaga: auto
Inherency: Hindi
Gawa ng animasyon: Hindi sumusuporta. Tingnan ang:Katangian ng animasyon.
Bersyon: CSS3
Grammar ng JavaScript: object.style.overscrollBehavior="none"

Suporta ng browser

Ang mga numero sa talahanan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa katangian.

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* Sa Microsoft Edge, ang halaga ng 'none' ay pinapagtraktuhang 'contain', ito ay hindi tama.

相关页面

参考：CSS overscroll-behavior-x 属性

参考：CSS overscroll-behavior-y 属性

参考：CSS scroll-behavior 属性

参考：CSS scroll-margin 属性

参考：CSS scroll-padding 属性

参考：CSS scroll-snap-align 属性