Reputation: 125

Scrollbar behaviour on Firefox/Chrome - function to hide it but being able to scroll up?

I'm working for an artistic project and I'm struggling with a little thing I may have solved for Chrome but not for Firefox. I have a page where a text will be written by an A.I through a MySQL database. Quickly, the text will be out of its container so we managed to hide the scrollbar and follow the writing process without allowing the viewer to scroll up. Now I'm trying to allow the viewer to scroll up when the process is paused or done. You can see the test page here : http://82.223.18.239/writing7.php

I tried a few ways :

Using overflow:hidden all the time. This isn't working, the viewer can't scrollup when the writing process is paused or done.
switching from overflow:hidden to overflow:scroll when the writing is paused or done. In this case the window is forced back on the top of the page. This isn't good. I would like the view to stay at the bottom, where the writing is paused.
switching from overflow:hidden to overflow:scroll when the writing is paused or done. In this case the scrollbar is weirdly positioned and I didn't find any way to put it back on the right. It's glued to the myTables div, whatever I'm trying. When I'm trying to set it up on <body> this isn't working at all.
switching from overflow:hidden to overflow:scroll AND hidding the scrollbar. It maybe a bit messy but it works well for Chrome, by using ::-webkit-scrollbar {display: none;} but it doesn't work at all for Firefox.

To summarize, I would like the view to follow the writing process, like it does now, and I would like the user to be able to scroll up only when it's paused or done, allowing him/her to read the full text but I didn't find anyway to make it work. Could you help me a bit ?

Actually, I'm trying to change the overflow value of a #parent / #child div through this part of the showtext function, but it doesn't work either.

            else {
                get_data(skip);
                $('#body').css('overflow', 'hidden')
                $('#myTable').css('overflow-y', 'scroll').css('overflow-x', 'hidden')
                 }

Here's the actual full code :

<head>

   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
   <div id="myTable"> <div>

   <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <style type="text/css"> 

        #myTable{ 
           width:"90%";   
           height:"100%";
           min-width:250px;
           white-space: pre-wrap;
           word-wrap:break-word;
           position:absolute;
           border:solid 0px;
           top:-500px;
           left:320px;
           right:320px;
           bottom:0px;
           font-size:103px;
           font-family:"Times New Roman", Times, serif;
           text-align:left

                 } 

        #body{ 
           height:"100%";
           min-width:250px;

             } 

        #footer{ 
           height:"0px";
               } 


        ::-webkit-scrollbar {display: none;}


    </style> 

</head>

<body>
   <myTable>

    <script type="text/javascript">  
        var skip = 0;
        function get_data(index) {
            $.ajax({
                url : 'http://82.223.18.239/getData.php',
                type : 'POST',
                data: ({"skip":skip}),
                success : function(data) { 
                    if(data && data.trim()!='') {
                        skip = skip+1;
                        showText("#myTable", data, 0, 2);
                    }
                    else {
                        setTimeout(function () { get_data(skip); }, 30000);
                    }
                },
                error : function(request,error)
                {
                    alert("Request error : "+JSON.stringify(request));
                }

            });
        }

        function showText(target, message, index, interval) {   
            if (index < message.length) {
                $(target).append(message[index++]);
                setTimeout(function () { showText(target, message, index, interval); }, interval);

                $('#myTable').css('overflow', 'hidden').bind('DOMNodeInserted', function () {
                this.scrollTop = this.scrollHeight;
                                                                                           });


                                        }
            else {
                get_data(skip);
                $('#body').css('overflow', 'hidden')
                $('#myTable').css('overflow-y', 'scroll').css('overflow-x', 'hidden')
                 }
        }

        //var period = 10000; //NOTE: period is passed in milliseconds
        get_data(skip);
        //setInterval(page_refresh, period); 



        </script>

    </myTable>
</body>

<footer>

    <SCRIPT LANGUAGE="JavaScript">
    var message = new Array();
    message[0] = ""
    var reps = 2;
    var speed = 666; 
    var p = message.length;
    var T = "";
    var C = 0;
    var mC = 0;
    var s = 0;
    var sT = null;
    if (reps < 1) reps = 1;
    function doIt() {
    T = message[mC];
    A();
    }
    function A() {
    s++;
    if (s > 8) { s = 1;}
    if (s == 1) { document.title = '✊🏻✊✊🏼✊✊🏽✊✊🏾✊✊🏿✊✊🏻✊✊🏼✊✊✊🏻✊✊🏼✊✊🏽✊✊🏾'+T+'✊🏻✊✊🏼✊✊🏽✊✊🏾✊✊🏿✊✊🏻✊✊🏼✊✊🏽✊✊🏾✊✊'; }
    if (s == 2) { document.title = '☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠'+T+'☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️☠️'; }
    if (s == 3) { document.title = '🌍🌎🌍🌎🌍🌎🌏🌍🌎🌍🌎🌍🌎🌏🌍🌎🌍🌎🌍🌎🌏'+T+'✊🏻✊✊🏼✊✊🏽✊✊🏾✊✊🏿✊✊🏻✊✊🏼✊✊'; }
    if (s == 4) { document.title = '✊🏻✊✊🏼✊✊🏽✊✊🏾✊✊🏿✊✊🏻✊✊🏼✊✊🏽✊✊🏾✊✊'+T+'⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔⛔'; }
    if (s == 5) { document.title = '🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌'+T+'🛠🛠🛠🛠🛠🛠🛠🛠🛠🛠🛠🛠🛠🛠🛠🛠🛠🛠🛠🛠'; }
    if (s == 6) { document.title = '💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣💣'+T+'🖖🖖🏿🖖🖖🏼🖖🏾🖖🏼🖖🏿🖖🖖🏼🖖🏾🖖🖖🏿🖖🖖🏼🖖🏾🖖🏼'; }
    if (s == 7) { document.title = '🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌'+T+'🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌🔌'; }
    if (s == 8) { document.title = '✊🏻✊✊🏼✊✊🏽✊✊🏾✊✊🏿✊✊🏻✊✊🏼✊✊🏽✊✊🏾✊✊🏿'+T+'⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳⏳'; }if (C < (8 * reps)) {
    sT = setTimeout("A()", speed);
    C++;
    }
    else {
    C = 0;
    s = 0;
    mC++;
    if(mC > p - 1) mC = 0;
    sT = null;
    doIt();
       }
    }
    doIt();

    (function() {
      var template = '✊☔☁☁☁☠⛔☁☁☁⏳☔⚠☁☁⛔⏳☠☁☁☁☁☁💣✊🏾'.split(''),
        len = template.length,
        chars, string, i, j, k,
        pushOrHash = typeof window.history.pushState === 'function',

      increase = function(n) {
        return n < len - 1 ? n + 1 : 0;
      },

      update = function() {
        chars = [];
        j = k;

        for (i=0; i<len; i++) {
          j = increase(j);
          chars[i] = template[j];
        }

        string = ['/', chars.join(''), '/'].join('');
        k = increase(k);

        if (pushOrHash) {
          window.history.pushState(null, null, string);
        } else {
          window.document.location.hash = string;
        }

        setTimeout(update, 1000);
      };

      update();
    })();
    </script>

    </script>

        <script type="text/javascript">

        function pageLoad()
        {

        alert('The image of external things possesses for us the ambiguous dimension that in external nature everything can be considered to be connected, but also as separated. The uninterrupted transformations of materials as well as energies brings everything into relationship with everything else and make one cosmos out of all the individual elements. On the other hand, however, the objects remain banished in the merciless separation of space; no particle of matter can share its space with another and a real unity of the diverse does not exist in spatial terms. And, by virtue of this equal demand on self-excluding concepts, natural existence seems to resist any application of them at all. Only to humanity, in contrast to nature, has the right to connect and separate been granted, and in the distinctive manner that one of these activities is always the presupposition of the other. By choosing two items from the undisturbed store of natural things in order to designate them as -separate-, we have already related them to one another in our consciousness, we have emphasized these two together against whatever lies between them. And conversely, we can only sense those things to be related which we have previously somehow isolated from one another; things must first be separated from one another in order to be together. Practically as well as logically, it would be meaningless to connect that which was not separated, and indeed that which also remains separated in some sense. The formula according to which both types of activity come together in human undertakings, whether the connectedness or the separation is felt to be what was naturally ordained and the respective alternative is felt to be our task, is something which can guide all our activity. In the immediate as well as the symbolic sense, in the physical as well as the intellectual sense, we are at any moment those who separate the connected or connect the separate. Georg Simmel from -Bridges and Doors- 1909̿'); 
        }

        pageLoad(); 

    </script>  

</footer>

Upvotes: 1

Answers (2)

Mathieu Arbez Hermoso

Reputation: 125

I finally find a way to do exactly what I wanted.

For Google Chrome and webkit browsers, you simply have to do overflow:hidden and hide the scrollbar with ::-webkit-scrollbar {display: none;}

For other browsers, you'll have to set -ms-overflow-style:none and use

var textareaWidth = document.getElementById("yourdiv").scrollWidth;

document.getElementById("yourdiv").style.width = textareaWidth + "px";

More specifically, for me it worked by rewriting the showtext function like this :

function showText(target, message, index, interval) {   
            if (index < message.length) {
                $(target).append(message[index++]);
                setTimeout(function () { showText(target, message, index, interval); }, interval);

                $('#myTable').css('overflow', 'hidden').bind('DOMNodeInserted', function () {
                this.scrollTop = this.scrollHeight;
                                                                                           });


                                        }
            else if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
                get_data(skip);
                $('#myTable').css('overflow', 'hidden')
                document.getElementById("myTable").style.width = textareaWidth + "px";
                 }

            else if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)){
                get_data(skip);
                $('#myTable').css('overflow', 'hidden').css('-ms-overflow-style', 'none')
                document.getElementById("myTable").style.width = textareaWidth + "px";
                 }

            else if (/MSIE 10/i.test(navigator.userAgent)){
                get_data(skip);
                $('#myTable').css('overflow', 'hidden').css('-ms-overflow-style', 'none')
                document.getElementById("myTable").style.width = textareaWidth + "px";
                 }

            else if (/Edge\/\d./i.test(navigator.userAgent)){
                get_data(skip);
                $('#myTable').css('overflow', 'hidden').css('-ms-overflow-style', 'none')
                document.getElementById("myTable").style.width = textareaWidth + "px";
                 }

                else {
                    get_data(skip);
                    $('#myTable').css('overflow', 'scroll')
                }
        }

Upvotes: 0

Sheryl G.

Reputation: 11

You used to be able to use overflow: -moz-scrollbars-none; but it is depreciated in recent versions of firefox.

And attempting to change overflow-x or overflow-y has also been depreciated.

I recommend setting your right margin (or whichever side the scrollbar is on) to a value equal to the width of the scrollbar, only negative. Then when you want to show the scrollbar, all you have to do is adjust the margin.

Note that depending on your layout you may have to also set the other margins (top, bottom and left) in order for your content to look consistent and have appropriate spacing.

Upvotes: 1

Scrollbar behaviour on Firefox/Chrome - function to hide it but being able to scroll up?

Answers (2)

Related Questions