How to turn off the sound of the video in the background when scrolling the page?

Question

JavaScript

Hello. Question about the videophone for the site.
There is a Landing-Page in which a video with sound is played in the background on the 1st main canvas.
How can I make it so that when scrolling the page (For example, scrolling to the 2nd or 3rd canvas), the sound turns off smoothly, and when scrolling back to the 1st canvas, it turns on smoothly.
Here is the code for reference and for those who need a video background:

<div id="trailer" class="is_overlay">
      <video id="video" width="100%" height="auto"  autoplay="autoplay" loop="loop" preload="auto" muted>
        <source src="video/backgroundCanvasOneQ.mp4">
      </video>
    </div>

.is_overlay{ display: block; width: 100%; height: 100%; }
      
      body {
        background-color: black;
      }
      #trailer {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        overflow: hidden;
      }
      #trailer > video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      /* 1. No object-fit support: */
      @media (min-aspect-ratio: 16/9) {
        #trailer > video { height: 300%; top: -100%; }
      }
      @media (max-aspect-ratio: 16/9) {
        #trailer > video { width: 300%; left: -100%; }
      }
      /* 2. If supporting object-fit, overriding (1): */
      @supports (object-fit: cover) {
        #trailer > video {
          top: 0; left: 0;
          width: 100%; height: 100%;
          object-fit: cover;
        }
      }

JS code - A lot of extra stuff, haven't fixed anything yet.

var Preloader = function (element) {				
        var video =  document.getElementById(element),
          preloader = document.getElementById('preloader'),
          enter = document.getElementById('enter');
        var ua = detect.parse(navigator.userAgent);
        if ( ua.os.family === 'Android' ) {
          video.setAttribute( 'controls','controls' );
        }
        
        var api = {};
        api._removePreloader = function() {
          preloader.style.opacity = 0;
          enter.style.opacity = 1;
        };
        api.startCheckingLoading = function() {
          video.addEventListener('click',function(){
            video.play();
          },false);
          video.addEventListener( 'play', api._removePreloader() );			
        };
        return api;			   			   
      }
      
      window.addEventListener('load', function() {
        var preloader = Preloader('video');
        preloader.startCheckingLoading();
        
      });

Answer 1

document.onscroll=function(){
var s=document.body.scrollTop;
var max=600;//при скроле на 600px громкость = 0
var vol=-1*((s-max)/max);//громкость
vol=(vol>=0)?vol:0;
console.log(s,vol)
}