Ответы пользователя по тегу CSS
  • Как пофиксить сдвиг страницы сайта влево и вправо?

    batowski
    @batowski
    Если вы видите скролл, значит что то как вы говорите все таки «вылезает».

    Вот примерное решение.

    Создайте в body блок, например:
    <div class=“app”>
      <!—Все содержимое здесь—>
    </div>


    Поместите все содержимое сайта в этот блок.

    Пропишите для него css:
    .app {
      position:relative;
      overflow:hidden;
    }
    Ответ написан
    Комментировать
  • Как сделать простой плагин скролла на css transform?

    batowski
    @batowski
    Через transform вы не добьетесь никакого плавного отклика, наоборот это вызовет только массу неприятных ощущений от вашего интерфейса.
    Даже самые навороченные слайдер плагины на js, работают с фризами.
    И все они, используют transform.

    Это решается обычным css:
    overflow:scroll;
    Ответ написан
    Комментировать
  • Как элементу со свойством fixed, добавить затухание по мере скроллинга вниз?

    batowski
    @batowski
    function setOpacityOnScroll(className, scrollThreshold) {
      var elements = document.getElementsByClassName(className);
    
      Array.from(elements).forEach(function(element) {
        window.addEventListener('scroll', function() {
          // Получаем значение прокрутки страницы
          var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
          // Вычисляем значение прозрачности в зависимости от прокрутки страницы
          var opacity = 1 - (scrollTop / element.offsetHeight);
    
          // Ограничиваем значение прозрачности от 0 до 1
          opacity = Math.max(0, Math.min(1, opacity));
    
          // Устанавливаем значение прозрачности элемента
          element.style.opacity = opacity.toString();
    
          // Если прокрутка превысила пороговое значение, устанавливаем прозрачность 0
          if (scrollTop >= scrollThreshold) {
            element.style.opacity = '0';
          }
        });
      });
    }
    
    // Пример использования функции
    setOpacityOnScroll('fixed-element', 500);


    Наверно, что типо того
    Ответ написан
    1 комментарий