Question

我正在为一个艺术项目工作，我正在努力解决一些我可能已经为Chrome而不是Firefox解决的问题。我有一个页面，文本将由A.I通过MySQL数据库写入。很快，文本将不在其容器中，因此我们设法隐藏滚动条并按照写入过程而不允许查看器向上滚动。现在，我试图允许观看者在暂停或完成进程时向上滚动。您可以在此处查看测试页：http://82.223.18.239/writing7.php

我尝试了几种方法：

始终使用overflow:hidden。这不起作用，当暂停或完成写入过程时，观众不能滚动。
在暂停或完成写入时从overflow:hidden切换到overflow:scroll。在这种情况下，窗口被强制回到页面顶部。这不好。我希望视图停留在底部，写作暂停。
在暂停或完成写入时从overflow:hidden切换到overflow:scroll。在这种情况下，滚动条位置奇怪，我没有找到任何方法将其放回右侧。无论我尝试什么，它都会粘在myTables div上。当我试图在<body>上进行设置时，这根本不起作用。
从overflow:hidden切换到overflow:scroll并隐藏滚动条。它可能有点乱，但它适用于Chrome，使用::-webkit-scrollbar {display: none;}，但它根本不适用于Firefox。

总而言之，我希望视图遵循写作过程，就像现在一样，我希望用户只有在暂停或完成时才能向上滚动，允许他/她阅读全文，但我无论如何都找不到它的功能。你能帮我一下吗？

实际上，我试图通过showtext函数的这一部分来改变#parent / #child div的溢出值，但它也不起作用。

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

这是实际的完整代码：

<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>

Answer 1

您曾经能够使用overflow: -moz-scrollbars-none;，但在最新版本的Firefox中它已被折旧。

尝试更改overflow-x或overflow-y也已被弃用。

我建议将右边距（或滚动条所在的一侧）设置为等于滚动条宽度的值，仅为负值。然后，当您想要显示滚动条时，您所要做的就是调整边距。

请注意，根据您的布局，您可能还必须设置其他边距（顶部，底部和左侧），以使您的内容看起来一致并具有适当的间距。

Answer 2

我终于找到了一种完全符合我想要的方法。

对于Google Chrome和webkit浏览器，您只需执行overflow:hidden并隐藏滚动条::-webkit-scrollbar {display: none;}

对于其他浏览器，您必须设置-ms-overflow-style：none并使用

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

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

更具体地说，对我而言，它通过重写showtext函数来实现：

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')
                }
        }

Firefox / Chrome上的滚动条行为 - 隐藏它但能够向上滚动的功能？

2 个答案: