ਕਿਵੇਂ ਬਣਾਓ: ਸਕਰੋਲ ਪ੍ਰਭਾਵ

ਸਿੱਖੋ ਕਿਵੇਂ ਸਕਰੋਲ ਪੁਆਰਟਸ ਬਣਾਓ。

ਸਕ੍ਰੋਲਿੰਗ ਪ੍ਰਭਾਵ

ਇਹ ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕਰਕੇ ਸਕ੍ਰੋਲਿੰਗ ਸਮੱਗਰੀ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਛੁਪਾਉਣ ਵਿੱਚ ਤਬਦੀਲ ਕਰੋ。

ਸਕ੍ਰੋਲਿੰਗ ਸਮੱਗਰੀ. ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕਰਕੇ ਸਕ੍ਰੋਲਿੰਗ ਸਮੱਗਰੀ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਛੁਪਾਉਣ ਵਿੱਚ ਤਬਦੀਲ ਕਰੋ।Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

亲自试一试

ਸਕ੍ਰੋਲਿੰਗ ਹੋਣ ਵਾਲੀ ਸਮੱਗਰੀ ਦਾ ਪ੍ਰਭਾਵ ਬਣਾਓ

ਪਹਿਲਾ ਕਦਮ - ਜ਼ਿਆਦਾ ਐੱਚਟੀਐੱਮਐੱਲ ਜੋੜੋ:

<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

ਦੂਜਾ ਕਦਮ - ਜ਼ਿਆਦਾ ਸਿਸਟਮ ਜੋੜੋ:

ਅਕਾਰਨਾ ਸਟਾਈਲ ਸੈਟ ਕਰੋ:

/* ਖੁੱਲ੍ਹਣ ਅਤੇ ਬੰਦ ਕਰਨ ਵਾਲੀ ਸਮੱਗਰੀ ਦੇ ਬਟਨ ਦੇ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰੋ */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕਰਨ ਉੱਤੇ ਅਤੇ ਜਦੋਂ ਆਪਣਾ ਮਾਉਸ ਬਟਨ ਉੱਤੇ ਰਹਿੰਦਾ ਹੈ(ਹੋਵੇਂ ਹੋਵੇ ਸਿਰਫ ਹੋਵੇਂ ਹੋਵੇ ਸਿਰਫ) ਬਟਨ ਨੂੰ ਪਿੱਛੇ ਰੰਗ ਜੋੜੋ(ਜ਼ਿਆਦਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ .active ਕਲਾਸ ਜੋੜੋ) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* ਸਕ੍ਰੋਲਿੰਗ ਕਰਨ ਵਾਲੀ ਸਮੱਗਰੀ ਦੇ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰੋ।ਨੋਟ: ਮੂਲਤਬੀ ਛੁਪਾਓ */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

ਤੀਜਾ ਕਦਮ - ਜ਼ਿਆਦਾ ਜਾਵਾਸਕ੍ਰਿਪਟ ਜੋੜੋ:

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

亲自试一试

ਐਨੀਮੇਸ਼ਨ ਵਾਲਾ ਫੋਲਡਰ (ਹੇਠਾਂ ਸਾਰਣ)

ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਵਾਲਾ ਫੋਲਡਰ (ਹੇਠਾਂ ਸਾਰਣ) ਬਣਾਉਣ ਲਈ max-height: 0、overflow: hide ਅਤੇ max-height ਸੁਪਨਾ ਨੂੰ ਪੈਨਲ ਕਲਾਸ ਵਿੱਚ ਜੋੜੋ.

ਫਿਰ, JavaScript ਦੀ ਮਦਦ ਨਾਲ ਮੈਨੂੰ ਹੱਲ ਕੀਤੇ ਗਏ max-height ਕੰਟੈਂਟ ਨੂੰ ਹੇਠਾਂ ਸਾਰਣ ਲਈ ਸ਼ੁਰੂ ਕਰੋ, ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਪੈਨਲ ਦੀ ਉਚਾਈ ਨੂੰ ਸਕਰੀਨ ਦੇ ਮੋਟਾਈ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹੋਏ:

ਉਦਾਹਰਣ

<style>
.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>

亲自试一试

ਆਇਕਾਨ ਜੋੜੋ

ਹਰੇਕ ਬਟਨ ਨੂੰ ਇੱਕ ਚਿੰਨ੍ਹ ਜੋੜੋ ਤਾਕਿ ਸਰੋਤਮਾਨ ਕੰਟੈਂਟ ਖੁੱਲ੍ਹਾ ਹੈ ਜਾਂ ਬੰਦ ਹੈ ਦਿਸ਼ਾ ਦੇਖਣ ਲਈ:

ਉਦਾਹਰਣ

.collapsible:after {
  content: '\02795'; /* 表示“加号”（+）的 Unicode 字符 */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* 表示“减号”（-）的 Unicode 字符 */
}

亲自试一试