Уменьшите мерцание / увеличьте плавность при использовании функции прокрутки

У меня на этом веб-сайте есть что-то типа оверлея, которое перемещается вверх с помощью функции прокрутки. Однако есть некоторые проблемы с IE, Firefox и даже Chrome, которые я не могу понять, как решить ... Проблема в Chrome меньше, но все же заметна и возникает, в частности, при использовании колеса мыши. Есть ли способ сделать его более плавным или мне следует использовать какой-то другой способ / инструмент? Большое спасибо за любую помощь.

Ручка: https://codepen.io/anon/pen/bMwrQV

$(document).ready(function() {

  var win = $(window); // Window
  var content = $(".content") // Content jquery element
  var overlay = $(".overlay"); // Overlay jquery element
  var buttonShowWhenVisible = $(".show-when-visible"); // This is the button which will fade in

  var overlayHeight, scrollTop, stopMargin, opacity;

  win.scroll(function(e) {

    scrollTop = win.scrollTop();
    overlayHeight = overlay.outerHeight(); // The height of the overlay
    stopMargin = false;
    opacity = (1 - scrollTop / overlayHeight);

    if (opacity < 0.00 === false)
      overlay.css("opacity", opacity);

    if (scrollTop >= overlayHeight)
      stopMargin = true;

    // Keep adding margin on top so that the element stays in the view until it reached overlayheight
    if (!stopMargin) {
      content.css({
        marginTop: scrollTop
      });
    }

    // If scollTop reached the height of the overlayheight, then it means 
    // that the overlay if at the top of the page. show the button using jquery's fadeIn
    if (scrollTop >= overlayHeight) {        
      buttonShowWhenVisible.fadeIn();
    // When not, then hide the button using jquery's fadeOut
    } else {
      buttonShowWhenVisible.fadeOut();
    }

  });

});

javascript jquery html css scroll

02.05.2018 13:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

111

Ответы 1

Попробуйте этот JS: (от: https://codepen.io/ejingfx/pen/EVvPwz)

$(document).ready(function(){
            // $fn.scrollSpeed(step, speed, easing);
            jQuery.scrollSpeed(200, 800);
});

// Custom scrolling speed with jQuery
// Source: github.com/ByNathan/jQuery.scrollSpeed
// Version: 1.0.2

(function($) {

    jQuery.scrollSpeed = function(step, speed, easing) {

        var $document = $(document),
            $window = $(window),
            $body = $('html, body'),
            option = easing || 'default',
            root = 0,
            scroll = false,
            scrollY,
            scrollX,
            view;

        if (window.navigator.msPointerEnabled)

            return false;

        $window.on('mousewheel DOMMouseScroll', function(e) {

            var deltaY = e.originalEvent.wheelDeltaY,
                detail = e.originalEvent.detail;
                scrollY = $document.height() > $window.height();
                scrollX = $document.width() > $window.width();
                scroll = true;

            if (scrollY) {

                view = $window.height();

                if (deltaY < 0 || detail > 0)

                    root = (root + view) >= $document.height() ? root : root += step;

                if (deltaY > 0 || detail < 0)

                    root = root <= 0 ? 0 : root -= step;

                $body.stop().animate({

                    scrollTop: root

                }, speed, option, function() {

                    scroll = false;

                });
            }

            if (scrollX) {

                view = $window.width();

                if (deltaY < 0 || detail > 0)

                    root = (root + view) >= $document.width() ? root : root += step;

                if (deltaY > 0 || detail < 0)

                    root = root <= 0 ? 0 : root -= step;

                $body.stop().animate({

                    scrollLeft: root

                }, speed, option, function() {

                    scroll = false;

                });
            }

            return false;

        }).on('scroll', function() {

            if (scrollY && !scroll) root = $window.scrollTop();
            if (scrollX && !scroll) root = $window.scrollLeft();

        }).on('resize', function() {

            if (scrollY && !scroll) view = $window.height();
            if (scrollX && !scroll) view = $window.width();

        });       
    };

    jQuery.easing.default = function (x,t,b,c,d) {

        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    };

})(jQuery);

выглядит красиво ... любое предложение, как это можно было бы реализовать в существующем коде? codepen.io/anon/pen/bMwrQV

— 02.05.2018 13:37

вы можете добавить этот <script> в <body> html или вызвать его как внешний файл JS.

— 02.05.2018 13:40

да, я вижу, это делает каждую прокрутку гладкой, но это не помогает с наложением, заставляет его еще больше мерцать

— 02.05.2018 13:46

02.05.2018 13:33