CSS ਨਾਲ ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਉਣ ਨੂੰ ਸਿੱਖੋ

ਕੋਰਸ ਸਿਫਾਰਸ਼:

CSS ਨਾਲ ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਉਣ ਨੂੰ ਸਿੱਖੋ

ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਉਣ ਦੇ ਤਰੀਕੇ overflow: hidden;ਵਰਤੋਂ ਕਰੋ, ਜਿਸ ਨਾਲ ਹਰੇਕਸ ਅਤੇ ਵਰਤਕ ਸਕਰੋਲਬਾਰ ਨੂੰ ਸਾਥ-ਸਾਥ ਛੁਪਾਇਆ ਜਾ ਸਕਦਾ ਹੈ。

ਇੰਸਟੈਂਸ

body {
  overflow: hidden; /* ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਓ */
}

ਆਪਣੇ ਆਪ ਦੋਸਤੀ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਜੇਕਰ ਤੁਸੀਂ ਕੇਵਲ ਵਰਤਕ ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਉਣਾ ਜਾਂ ਕੇਵਲ ਹਰੇਕਸ ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ overflow-y ਜਾਂ overflow-x:

ਇੰਸਟੈਂਸ

body {
  overflow-y: hidden; /* ਵਰਤਕ ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਓ */
  overflow-x: hidden; /* ਹਰੇਕਸ ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਓ */
}

ਆਪਣੇ ਆਪ ਦੋਸਤੀ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

ਧਿਆਨ ਦੇਓਂ,overflow:hidden ਸਕਰੋਲਬਾਰ ਦੀ ਕਾਰਵਾਈ ਨੂੰ ਵੀ ਹਟਾ ਦੇਵੇਗਾ।ਪੰਨੇ ਅੰਦਰ ਸਕਰੋਲ ਕਰਨਾ ਸੰਭਵ ਨਹੀਂ ਹੋਵੇਗਾ。

ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਓ ਲੇਕਿਨ ਕਾਰਵਾਈ ਰੱਖਣ

ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਓ ਲੇਕਿਨ ਸਕਰੋਲ ਕਰਨਾ ਜਾਰੀ ਰੱਖਣ ਲਈ ਨਿਮਨ ਕੋਡ ਵਰਤੋਂ ਕਰੋ:

ਇੰਸਟੈਂਸ

/* Chrome, Safari ਅਤੇ Opera ਵਿੱਚ ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਓ */
.example::-webkit-scrollbar {
  display: none;
}
/* IE, Edge ਅਤੇ Firefox ਵਿੱਚ ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਓ */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

ਆਪਣੇ ਆਪ ਦੋਸਤੀ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ

Webkit ਬਰਾਉਜ਼ਰ (ਜਿਵੇਂ ਕਿ Chrome, Safari ਅਤੇ Opera) ਅਸਥਾਈ ਸਮਰਥਨ ਕਰਦੇ ਹਨ ::-webkit-scrollbar ਪਸੰਦੀਦਾ ਪ੍ਰਤੀਯੋਗੀ, ਸਾਨੂੰ ਬਰਾਉਜ਼ਰ ਸਕਰੋਲਬਾਰ ਦੇ ਪ੍ਰਤੀਯੋਗੀ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਸੋਧਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।IE ਅਤੇ Edge ਸਮਰਥਨ ਕਰਦੇ ਹਨ -ms-overflow-style: ਵਿਸ਼ੇ, Firefox ਸਮਰਥਨ ਕਰਦਾ ਹੈ scrollbar-width ਵਿਸ਼ੇ, ਇਹ ਵਿਸ਼ੇ ਸਾਨੂੰ ਸਕਰੋਲਬਾਰ ਨੂੰ ਛੁਪਾਉਣ ਦੇ ਨਾਲ-ਨਾਲ ਉਸ ਦੀ ਕਾਰਵਾਈ ਰੱਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ。

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆ:CSS 溢出

参考手册：CSS overflow 属性