Bagaimanakah Saya Menyahpepijat Nilai `calc()` CSS?-tutorial css-php.cn

Bagaimanakah Saya Menyahpepijat Nilai `calc()` CSS?

Linda Hamilton

Lepaskan： 2024-12-14 02:15:09

asal

487 orang telah melayarinya

How Do I Debug CSS `calc()` Values?

Bagaimana untuk menyahpepijat nilai calc() CSS?

Masalah

Saya mempunyai formula yang agak kompleks, contohnya: transform: scale(var(--image-scale)) translateY ( calc((1px var(--element-height) (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))

Bagaimana untuk nyahpepijat nilai yang dikira?
Selain itu, adakah terdapat cara untuk mengesahkan/menyerlahkan ralat formula?

Saya mencuba ini

tetap;

display: block;
left:0;
right: 0;
background: yellow;
padding: 5px;
z-index: 100;
content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));

Salin selepas log masuk

Tidak berfungsi

Satu-satunya cara yang saya temui ialah kepada Sebahagian daripada pengiraan diletakkan dalam atribut berangka yang tidak digunakan, contohnya dalam gif di bawah background-position-x supaya ia akan memaparkan nilai yang dikira pada tab pengiraan - berguna tetapi tidak begitu mudah (perhatikan latar belakang-kedudukan-x berubah apabila halaman menatal):

<div>

cssProps: true

Salin selepas log masuk

})
hasil const = Pemisahan ();

var parallaxedElements = document.querySelectorAll('.section');

document.addEventListener('scroll', function(e) {

parallaxedElements
Array.from(parallaxedElements).forEach((el) => {
  var bcr = el.getBoundingClientRect();
  if (bcr.y < 0 &amp;&amp; Math.abs(bcr.y) <= bcr.height) {
    el.style.setProperty("--scrolled-out-y", Math.round(Math.abs(bcr.y) * 10000 / bcr.height) / 10000);
  }
});
</p>
<p>})

< pra>html {

scroll-behavior: smooth;

Salin selepas log masuk

}

badan {

font-family: "Roboto";
font-size: 14px;
line-height: 1.4;
scroll-behavior: smooth;

Salin selepas log masuk

}

.bahagian {

position: relative;
background-attachment: fixed;
z-index: 1;
--image-scale: 1.2;
--scrolled-out-y: 0;

Salin selepas log masuk

}

.section__background {

position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;

Salin selepas log masuk

}

.section__background:selepas {

content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: 1;
background: linear-gradient(to bottom, black, 100% white);
background: rgba(0, 0, 0, 0.4);
opacity: calc(1 + ((var(--viewport-y) * 1.5)));

Salin selepas log masuk

}

.section__background>img {

height: 150vh;
width: 100%;
object-fit: cover;
position: absolute;
left: 0;
top: 0px;
user-select: none;
transform: scale(var(--image-scale)) translateY(calc((-1px * var(--element-height) * (var(--image-scale) - 1)) * var(--scrolled-out-y)));

Salin selepas log masuk

}
/* .penunjuk:selepas {

    position: fixed;
    display: block;
    left: 0;
    right: 0;
    background: pink;
    padding: 5px;
    z-index: 100;
    content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));
} */

Salin selepas log masuk

.section__container {

padding-bottom: 50vh;
overflow: hidden;
align-items: flex-start;
position: relative;
z-index: 4;

Salin selepas log masuk

}

.section__heading {

color: #fff;
text-transform: uppercase;
font-size: 45px;
line-height: 1.2;
font-weight: 800;
letter-spacing: 8px;
margin: 0;
overflow: hidden;
position: relative;
padding-bottom: 50px;
margin-bottom: 50px;

Salin selepas log masuk

}

.section__heading :selepas {

content: "";
position: absolute;
top: 200px;
left: 0;
right: 0;
height: 2px;
transform: translateX(calc(var(--scrolled-out-y) * 100% - 70%));
background: #b38c6b;

Salin selepas log masuk

}

.section__content {

display: flex;
color: white;
flex-direction: column;

Salin selepas log masuk

}

.section__content p p {

margin-top: 20px;

Salin selepas log masuk

}

.memisahkan {

--char-percent: calc(var(--char-index) / var(--char-total));

Salin selepas log masuk

}

.memisahkan .char {

display: inline-block;
opacity: calc(1 + ((var(--viewport-y) * 1.5) - var(--char-percent)));

Salin selepas log masuk

}

<link rel=' lembaran gaya' href='https://unpkg.com/splitting/dist/splitting.css'></p>
<p><section data-scroll> <div class="section__background"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Salin selepas log masuk