文章/答案/技术大牛

发布

社区首页 >问答首页 >用window.scrollY在滚动页上控制HTML元素的样式

问用window.scrollY在滚动页上控制HTML元素的样式
EN

Stack Overflow用户

提问于 2022-06-21 17:51:57

回答 3查看 45关注 0票数 0

当使用window.addEventListener(“滚动”、函数(){})和window.scrollY值滚动时，我试图更改div元素的字体大小和边距底部。但如果我不停止滚动，我不希望它永远改变。我只想把字体大小从256 to减少到192 to左右，边距底部减少到128 to左右。你们能告诉我怎么控制它吗？抱歉，我刚开始JS几天。下面是我代码的一部分。

let brownie = document.getElementById('backgroundBrownie');
window.addEventListener('scroll', function() {
  let value = window.scrollY;
  brownie.style.fontSize = 256 - value / 4 + 'px';
  brownie.style.marginBottom = value + 'px';

})

<div class="background">
  <div class="backgroundText" id="backgroundBrownie">
    Brownie
  </div>
</div>

javascript

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-06-21 18:00:15

只需检查使用if和else if语句计算的值。

目前，这似乎相当不稳定。我怀疑你的算法需要改进。

let brownie = document.getElementById('backgroundBrownie');
window.addEventListener('scroll', function() {
  let value = window.scrollY;
  
  let fontSize = 256 - value / 4;
  if(fontSize < 192)
    fontSize = 192;
  else if(fontSize > 256)
    fontSize = 256;
    
  let marginBottom = value;
  if(marginBottom > 128)
    marginBottom = 128;
    
  brownie.style.fontSize = fontSize + 'px';
  brownie.style.marginBottom = marginBottom + 'px';

})

<div class="background">
  <div class="backgroundText" id="backgroundBrownie">
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
  </div>
</div>

票数 0

Stack Overflow用户

发布于 2022-06-21 17:58:16

        let value = window.scrollY;
        let fontSize = 256 - value/4;
        brownie.style.fontSize = fontSize < 192 ?  '192px' : fontSize + 'px';
        let marginBottom = value;
        brownie.style.marginBottom = marginBottom < 128 ?  '128px' : marginBottom + 'px';

这些内联三元操作符检查该值是否小于您的限制。如果是，则属性设置为极限。如果没有，则使用计算值。

票数 0

Stack Overflow用户

发布于 2022-06-21 18:00:58

brownie.style.fontSize = (256 -值/4 >= 192)？(256 -值/4+ 'px')：‘192 px’；

brownie.style.marginBottom =(值>= 128)？(值+ 'px')：‘128 px’；

还可以先将值存储在临时变量中。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72705155

复制

相似问题

问用window.scrollY在滚动页上控制HTML元素的样式
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用window.scrollY在滚动页上控制HTML元素的样式EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用window.scrollY在滚动页上控制HTML元素的样式
EN