1

Добрый день, подскажите как предать параметры css во время скрола страницы. Например если я начинаю скролить страницу transform: scale(0.9); значеие 0.9 уменьшается на 0.8 0.7 итд до нуля.

1 ответ 1

2

Используйте событие wheel для изменения скейла во время прокрутки колесика:

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>

Используйте событие scroll для изменения скейла во время прокрутки страницы:

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.