主页 / 问题 / 626184
Accepted
Anton Essential
Asked:2020-02-10 21:02:04 +0000 UTC2020-02-10 21:02:04 +0000 UTC

滚动时如何传递css参数？

  • 772

下午好，告诉我如何在滚动页面时背叛 css 参数。例如，如果我开始滚动页面 transform: scale(0.9); 值 0.9 减少 0.8 0.7 等等直到零。

javascript

1 个回答

  1. Best Answer

    在滚轮滚动时使用滚轮事件更改比例：

    var elem = document.getElementById('blockId');
var scale = 1;
var scaleStep = 0.0001;

if (elem.addEventListener) {
  if ('onwheel' in document) {
    // IE9+, FF17+, Ch31+
    elem.addEventListener("wheel", onWheel);
  } else if ('onmousewheel' in document) {
    // устаревший вариант события
    elem.addEventListener("mousewheel", onWheel);
  } else {
    // Firefox < 17
    elem.addEventListener("MozMousePixelScroll", onWheel);
  }
} else { // IE8-
  elem.attachEvent("onmousewheel", onWheel);
}

function onWheel(e) {
  e = e || window.event;

  // wheelDelta не дает возможность узнать количество пикселей
  var delta = e.deltaY || e.detail || e.wheelDelta;
  scale = scale + delta*scaleStep;
  elem.innerHTML = scale;
  elem.style.transform = 'scale(' + scale + ')';

  e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
        .block{
      width:200px;
      height:200px;
      background:lightgrey;
    }
    <div class="block" id="blockId">
</div>

    在页面滚动时使用滚动事件更改比例：

    var elem = document.getElementById('blockId');
var scale = 1;
var scaleStep = 0.0001;

window.onscroll = function() {
  var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  scale = scale + scrolled *scaleStep;
  elem.innerHTML = scale;
  elem.style.transform = 'scale(' + scale + ')';
}
        .block{
      width:200px;
      height:200px;
      background:lightgrey;
    }
    <div class="block" id="blockId">
</div>

    • 2

相关问题