In my webpage I have navigation options on top then further down in the middle of viewport there is another scrollable separate div for article. When visitors will start scrolling in the article div (art-container) the scrollintoview method will bring the div into center of viewport. To achieve this was easy on desktop but not in mobile browser. Touchmove, touchstart event alone didn't work as intended. I was trying to detect swipe up on mobile and finally the swipe up detection is working and I can make something visible and hidden using swipe up and down on mobile but why the scrollintoview function not working now. I tried scrollto which worked but scrollintoview not working. Please help me to solve this how to make it work and any other idea to get same the result ...?

HTML

<div class="articles-container" id="art-container" 
                    ontouchstart="touchStart(event)"
                    ontouchmove="touchMove(event)"
                    ontouchend="touchEnd()">

JAVASCRIPT

var startingX , startingY , movingX , movingY ;
                    function touchStart(evt)
                    {
                    startingX = evt.touches[0].clientX ;
                    startingY = evt.touches[0].clientY ;
                    }
                    function touchMove(evt)
                    {
                    movingX = evt.touches[0].clientX ;
                    movingY = evt.touches[0].clientY ;
                    }
                    function touchEnd()
                    { 
                    if(startingY+100 < movingY)
                    {
                        console.log('down');
                        document.getElementById("Ellipse_3").style.visibility = "visible";
                        document.getElementById("Ellipse_2").style.visibility = "hidden";
                    } 
                    else if(startingY-100 > movingY)
                    {
                        console.log('up'); // only scrollIntoView not working
                        document.getElementById("art-container").scrollIntoView({
                                block: 'center',
                                behavior: 'smooth'
                        });
                        // style changing on swipe up is working fine   
                        document.getElementById("Ellipse_2").style.visibility = "visible";
                        document.getElementById("Ellipse_3").style.visibility = "hidden";
                    }
                    }