Javascript-форум - Scroll с ефектом свечения

Здравствуйте, я написал небольшой скролл (который должен был быть красивым, но не получилось:) )

<!DOCTYPE html>

<body>
<div class="main">
    <div class="child">

    </div>
</body>
<style>
    body{
        overflow:hidden;
    }

    .main {
        overflow-x: hidden;
        overflow-y: auto;
        width: 50vmin;
        height: 50vmin;
    }

    .main::-webkit-scrollbar {
        width: 5vmin;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 5vmin;
    }

    .main::-webkit-scrollbar-thumb {
        background: blue;
        box-shadow: 0px 0px 5vmin 5vmin rgb(109, 93, 255);
        border-radius: 5vmin;
    }
    .child{
        height:200%;
        width:10%;
    }



</style>

</html>

Тень свечения зависает на элементах возле scroll-а и редко перерисовывается, перерисовку можно вызвать переключив фокус на полноэкранное приложение и обратно. Но как можно реализовать светящийся небагованный скролл:thanks: