主页 / user-1583995

Meek's questions

Martin Hope
Meek
Asked: 2024-11-27 18:44:45 +0800 CST
  • 5

我正在尝试制作一个结构，让内容区域自动扩展并溢出页脚，以产生视差效果。但是，我似乎找不到 100% 有效的解决方案。

min-height: 100vh;由于 ，我最终在页脚中出现了不可点击的链接<body>。有什么好方法可以解决这个问题吗？

body {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; 
  min-height: 100vh;
}

header {
   height: 200px;
   background-color: red;
}

main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 500px;
  margin-bottom: 550px;
  background-color: #f90;
  box-shadow: 0 2rem 1rem -1rem rgba(0, 0, 0, .15);
}

footer {
  background-color: #ccc;
  position: fixed;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 550px;
}
<header>Navigation</header>
<main>Content - auto grow</main>
<footer>Footer <a href="#">Link</a></footer>

html
Martin Hope
Meek
Asked: 2024-11-12 19:03:15 +0800 CST
  • 6

我想在滚动时旋转一些元素。我希望它们从 0 度开始旋转，然后在每次向上/向下滚动事件时将当前度数加或减 25 度（或任何其他数字）。

这是我的情况。第一次滚动时可以工作，但向上或向下滚动时值不会更新。我遗漏了什么？

const elem = document.querySelectorAll(".rotator");
window.addEventListener("scroll", function () {
  elem.forEach((el) => {
    let lastScrollTop = 0;
    let value = 0;
    let st = window.pageYOffset || document.documentElement.scrollTop;
    if (st > lastScrollTop) {
      // Scroll down
      value += 25;
    } else if (st < lastScrollTop) {
      // Scroll up
      value -= 25;
    }

    el.style.transform = `rotate(${value}deg)`;
  })
})
.rotator {
  height: 50px;
  width: 50px;
  background-color: lightgreen;

}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 1000px;
}
<h1>Keep rotating on scrolling up or down</h1>
<div class="rotator">Rotate</div>
<div class="rotator">Rotate</div>

javascript
Martin Hope
Meek
Asked: 2024-09-02 17:35:49 +0800 CST
  • 5

我有这个链接动画。我希望链接默认带有下划线，然后在悬停时添加动画下划线（下划线从左侧滑入）。这个示例完全符合我的要求，但在悬停时下划线离锚文本太近了 - 可能是因为我正在从文本装饰切换到背景。

那么，我怎样才能将悬停背景向下移动以匹配文本下划线偏移？添加background-position: left bottom -5px;到悬停不起作用。

a {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
   text-decoration: underline;
  text-underline-offset: 5px;
  position: relative;
  background: linear-gradient(#000, #000) left bottom no-repeat;
  background-size: 0% 1px;
  
}

a:hover {
  text-decoration: none;
  background-size: 100% 1px;
  transition: all 0.8s;
  /* background-position: left bottom -5px; */
}

body {
  line-height: 1.5;
}
<p>Bacon ipsum dolor amet picanha pork leberkas tail pig capicola. Fatback bacon rump biltong pastrami meatball cow. Meatloaf venison doner, flank swine pig beef bresaola corned beef capicola tri-tip bacon. Tri-tip rump ham short loin. Prosciutto porchetta corned beef rump. Pork chislic tri-tip short loin landjaeger andouille alcatra jerky sausage turkey. Chuck pastrami t-bone boudin doner pancetta pork chop flank pork shank spare ribs drumstick.</p>
<p>
<h3>Hover this link</h3>
  Andouille pork t-bone beef pig burgdoggen jowl. Shank short loin landjaeger rump alcatra pork belly jerky hamburger. <a href="">Pig cupim tongue meatball hamburger fatback flank prosciutto pork belly shank.</a>Chuck bresaola buffalo, short loin cow tongue tenderloin landjaeger beef cupim boudin shankle chislic t-bone. Sausage tenderloin hamburger leberkas kielbasa doner corned beef frankfurter tri-tip venison pastrami burgdoggen shankle. Kielbasa pancetta chicken strip steak. Cow bresaola biltong, boudin frankfurter filet mignon chislic andouille ham pork belly pastrami kevin.
</p>
<p>
  Biltong alcatra venison burgdoggen landjaeger, ball tip kielbasa prosciutto boudin tri-tip sirloin ribeye. Jowl buffalo pork belly sirloin cow porchetta. Salami prosciutto chuck doner swine buffalo beef andouille hamburger flank turkey short loin pork chop. Leberkas boudin ribeye chicken. Ball tip pancetta pork loin hamburger flank corned beef tongue meatloaf alcatra doner t-bone biltong buffalo rump. Sausage shankle beef beef ribs. T-bone ham hock rump venison swine sausage.</p>
提前感谢您的帮助。

css
Martin Hope
Meek
Asked: 2024-08-31 22:55:01 +0800 CST
  • 5

我有一个具有动态高度的垂直堆叠框列表。我希望每个框的高度都与其中最高的一样高。如何使用显示网格来实现这一点？

这是我所拥有的 - 我希望框 1 始终与框 2 一样高 - 反之亦然：

.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 1rem;
}

.box {
  border: 1px solid #ddd;
  padding: 1rem;
  margin-bottom: 1rem;
}
<div class="container">
  <div class="box">
    <strong>Box 1:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
  <div class="box">
    <strong>Box 2:</strong>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.
  </div>
</div>
编辑：我不是在寻找均匀分布高度的解决方案。谢谢 :-)

css
Martin Hope
Meek
Asked: 2024-08-10 21:30:49 +0800 CST
  • 5

使用IntersectionObserver- 是否可以检测滚动相交以及每个条目的过去/下方- 直到下一个条目滚动到视图中（其他元素位于条目之间）？

在下面的例子中，我想要检测每个带有类的元素下方的滚动，并保持它直到出现.title下一个带有类的元素。.title

我尝试了下面的方法，但没有按预期工作。

希望我的问题有意义。:)

let options = {
    root: null,
    rootMargin: '-50px 0px -50px 0px',
    threshold: [.5]
}

let sectionObserver = new IntersectionObserver((entries, options) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting && window.scrollY >= entry.boundingClientRect.top) {
            // Do something here when scrolling below this entry - until next entry is in view.
            console.log(entry.target);
        }
    });
});

document.querySelectorAll('.title').forEach((section) => {
    sectionObserver.observe(section);
});
<div class="container">
  <div class="title">Title one</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus dolor id ullamcorper tempor. Donec ut
    ullamcorper tellus. Etiam vel rhoncus urna. Aenean augue nulla, congue a orci at, imperdiet vehicula eros. Aenean
    ornare nibh ut leo faucibus fringilla. Quisque varius ut ipsum egestas feugiat. Mauris id nisl ultrices, consectetur
    mauris in, consectetur mi. Sed sit amet dolor urna. Nullam nec enim gravida, pulvinar lacus ut, volutpat nibh.
    Quisque commodo eu tortor ac dictum. Vivamus sodales risus sed blandit vulputate. Proin elit erat, varius non
    tincidunt ut, semper sed erat. Nulla vehicula vitae nisl nec dignissim. Curabitur viverra risus eu est pellentesque
    lobortis. Nullam egestas semper convallis.

    Ut ac blandit risus, sit amet elementum ex. Donec rhoncus augue eu cursus consequat. Duis a sapien sit amet elit
    aliquet molestie. Mauris nec ligula viverra, ornare dolor vel, malesuada nisl. Proin gravida dolor justo, sit amet
    tempus justo consectetur ut. Aenean malesuada iaculis tortor ac varius. Phasellus ultrices purus nisi, eu rutrum
    felis bibendum id. Phasellus enim dui, ultrices sed massa vel, euismod bibendum eros. Duis quis auctor augue, eget
    pellentesque velit. In a est at neque dignissim pellentesque et tempus sem. Nulla et leo diam.
  </p>
  <div class="title">Title two</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus dolor id ullamcorper tempor. Donec ut
    ullamcorper tellus. Etiam vel rhoncus urna. Aenean augue nulla, congue a orci at, imperdiet vehicula eros. Aenean
    ornare nibh ut leo faucibus fringilla. Quisque varius ut ipsum egestas feugiat. Mauris id nisl ultrices, consectetur
    mauris in, consectetur mi. Sed sit amet dolor urna. Nullam nec enim gravida, pulvinar lacus ut, volutpat nibh.
    Quisque commodo eu tortor ac dictum. Vivamus sodales risus sed blandit vulputate. Proin elit erat, varius non
    tincidunt ut, semper sed erat. Nulla vehicula vitae nisl nec dignissim. Curabitur viverra risus eu est pellentesque
    lobortis. Nullam egestas semper convallis.

    Ut ac blandit risus, sit amet elementum ex. Donec rhoncus augue eu cursus consequat. Duis a sapien sit amet elit
    aliquet molestie. Mauris nec ligula viverra, ornare dolor vel, malesuada nisl. Proin gravida dolor justo, sit amet
    tempus justo consectetur ut. Aenean malesuada iaculis tortor ac varius. Phasellus ultrices purus nisi, eu rutrum
    felis bibendum id. Phasellus enim dui, ultrices sed massa vel, euismod bibendum eros. Duis quis auctor augue, eget
    pellentesque velit. In a est at neque dignissim pellentesque et tempus sem. Nulla et leo diam.
  </p>
  <div class="title">Title three</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus dolor id ullamcorper tempor. Donec ut
    ullamcorper tellus. Etiam vel rhoncus urna. Aenean augue nulla, congue a orci at, imperdiet vehicula eros. Aenean
    ornare nibh ut leo faucibus fringilla. Quisque varius ut ipsum egestas feugiat. Mauris id nisl ultrices, consectetur
    mauris in, consectetur mi. Sed sit amet dolor urna. Nullam nec enim gravida, pulvinar lacus ut, volutpat nibh.
    Quisque commodo eu tortor ac dictum. Vivamus sodales risus sed blandit vulputate. Proin elit erat, varius non
    tincidunt ut, semper sed erat. Nulla vehicula vitae nisl nec dignissim. Curabitur viverra risus eu est pellentesque
    lobortis. Nullam egestas semper convallis.

    Ut ac blandit risus, sit amet elementum ex. Donec rhoncus augue eu cursus consequat. Duis a sapien sit amet elit
    aliquet molestie. Mauris nec ligula viverra, ornare dolor vel, malesuada nisl. Proin gravida dolor justo, sit amet
    tempus justo consectetur ut. Aenean malesuada iaculis tortor ac varius. Phasellus ultrices purus nisi, eu rutrum
    felis bibendum id. Phasellus enim dui, ultrices sed massa vel, euismod bibendum eros. Duis quis auctor augue, eget
    pellentesque velit. In a est at neque dignissim pellentesque et tempus sem. Nulla et leo diam.
  </p>
  <div class="title">Title four</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus dolor id ullamcorper tempor. Donec ut
    ullamcorper tellus. Etiam vel rhoncus urna. Aenean augue nulla, congue a orci at, imperdiet vehicula eros. Aenean
    ornare nibh ut leo faucibus fringilla. Quisque varius ut ipsum egestas feugiat. Mauris id nisl ultrices, consectetur
    mauris in, consectetur mi. Sed sit amet dolor urna. Nullam nec enim gravida, pulvinar lacus ut, volutpat nibh.
    Quisque commodo eu tortor ac dictum. Vivamus sodales risus sed blandit vulputate. Proin elit erat, varius non
    tincidunt ut, semper sed erat. Nulla vehicula vitae nisl nec dignissim. Curabitur viverra risus eu est pellentesque
    lobortis. Nullam egestas semper convallis.

    Ut ac blandit risus, sit amet elementum ex. Donec rhoncus augue eu cursus consequat. Duis a sapien sit amet elit
    aliquet molestie. Mauris nec ligula viverra, ornare dolor vel, malesuada nisl. Proin gravida dolor justo, sit amet
    tempus justo consectetur ut. Aenean malesuada iaculis tortor ac varius. Phasellus ultrices purus nisi, eu rutrum
    felis bibendum id. Phasellus enim dui, ultrices sed massa vel, euismod bibendum eros. Duis quis auctor augue, eget
    pellentesque velit. In a est at neque dignissim pellentesque et tempus sem. Nulla et leo diam.
  </p>
  <div class="title">Title five</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus dolor id ullamcorper tempor.`enter code here`
    Donec ut ullamcorper tellus. Etiam vel rhoncus urna. Aenean augue nulla, congue a orci at, imperdiet vehicula eros.
    Aenean ornare nibh ut leo faucibus fringilla. Quisque varius ut ipsum egestas feugiat. Mauris id nisl ultrices,
    consectetur

    mauris in, consectetur mi. Sed sit amet dolor urna. Nullam nec enim gravida, pulvinar lacus ut, volutpat nibh.
    Quisque commodo eu tortor ac dictum. Vivamus sodales risus sed blandit vulputate. Proin elit erat, varius non
    tincidunt ut, semper sed erat. Nulla vehicula vitae nisl nec dignissim. Curabitur viverra risus eu est pellentesque
    lobortis. Nullam egestas semper convallis.

    Ut ac blandit risus, sit amet elementum ex. Donec rhoncus augue eu cursus consequat. Duis a sapien sit amet elit
    aliquet molestie. Mauris nec ligula viverra, ornare dolor vel, malesuada nisl. Proin gravida dolor justo, sit amet
    tempus justo consectetur ut. Aenean malesuada iaculis tortor ac varius. Phasellus ultrices purus nisi, eu rutrum
    felis bibendum id. Phasellus enim dui, ultrices sed massa vel, euismod bibendum eros. Duis quis auctor augue, eget
    pellentesque velit. In a est at neque dignissim pellentesque et tem

    pus sem. Nulla et leo diam.
  </p>
</div>

javascript
Martin Hope
Meek
Asked: 2024-05-27 16:02:40 +0800 CST
  • 5

如果元素不是同级元素，是否可以（仅使用 css）自动递增数字？

像这样的东西吗？

.numbers {
    counter-increment: item;

    &::before {
        content: counter(item) ":";
    }
}
<div class="container">
  <div class="row">
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
    <div class="col">
      <div class="numbers"></div>
      Column
    </div>
  </div>
</div>

如果没有，实现这一目标的最佳和最有效的方法是什么？JavaScript？

html
Martin Hope
Meek
Asked: 2023-11-15 23:17:29 +0800 CST
  • 5

我正在尝试在 sass 中循环嵌套地图，以便为主题列表创建某些 css 变量。

我有一个这样的主题图：

$themes: (
    theme-1: (
        primary: (
            "el-background": #000,
            "el-background-hover": #0d0d0d,
            "el-color": #2c2f33,
            "el-link-color": #fff,
        ),
        secondary_1: (
            "el-background": #000,
            "el-background-hover": #ccc,
            "el-color": #f2f2f2,
            "el-link-color": #fff,
        )
    ),
    theme-2: (
        primary: (
            "el-background": #f90,
            "el-background-hover": #ccc,
            "el-color": #000,
            "el-link-color": #fff,
        ),
        secondary_1: (
            "el-background": #f2f2f2,
            "el-background-hover": #000,
            "el-color": #f2f2f2,
            "el-link-color": #fff,
        )
    )
);

我期望在 css 中得到这样的结果：

.theme-1 {
    .primary {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }

    .secondary_1 {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }
}

.theme-2 {
    .primary {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }

    .secondary_1 {
        --el-background: ...;
        --el-background-hover: ...;
        --el-color: ...;
        --el-link-color: ...;
    }
}

我如何调整这个循环来实现这一目标？我想我需要把它包裹在另一个@each但不知道如何。

@mixin theme() {
    @each $theme, $map in $themes {
        .#{$theme} {
            @each $key,
            $value in $map {
                --#{$key}: #{$value};
            }
        }
    }
}
sass