Javascript scrollTop cannot scroll to bottom when pinch zoomed in

Question

I am trying to automatically scroll to the bottom of a page when a user presses a button. I have tried used the JavaScript function scrollTop and it works nice... In almost all cases..

The issue is that when a user is using IOS and have pinch zoomed in on the page it does not scroll all the way down to the bottom. It is possible to recreate the issue using chrome developer tool, selecting mobile device, pinch zoom in (shift->mouse up) and then pressing the button.

Anyone had this issue and found a solution?

Code to recreate a test page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script>
        const scrollingElement = (document.scrollingElement || document.body);

        const scrollToBottom = () => {
            scrollingElement.scrollTop = scrollingElement.scrollHeight;
        }   
    </script>
</head>
<body>
    <button onClick="scrollToBottom()">Scroll to Bottom</button>
    <div id="ContentArea" style="height: 2000px; background-color:yellow"></div>
    <div>At bottom!</div>
</body>
</html>

Javascript scrollTop cannot scroll to bottom when pinch zoomed in

0 Answers0