我怎樣才能讓這個 javascript 選框手動滾動？

Question

我正在嘗試使用 javascript 和 CSS 制作一個自動滾動字幕，但我也希望能夠使用鼠標滾輪手動滾動字幕。 選框按預期運行，即。 它會自動滾動並很好地循環，但我不知道如何合並手動滾動。 這是我正在使用的代碼。 有任何想法嗎？

<doctype HTML>
<body onload="init()">
    <main>
        <div id="marquee_replacement" class="scrollbar" onmouseout="startit();" onmouseover="stop();">
            <p>some text some text some text some text some text some text some text some text</p>
            <p>some text some text some text some text some text some text some text some text</p>
            <p>some text some text some text some text some text some text some text some text</p>  
            <p>images are also present</p>
            <p class="spacer"></p>
        </div>

        <script type="text/javascript">
            //
            var speed = 2; // change scroll speed with this value
            /**
             * Initialize the marquee, and start the marquee by calling the marquee function.
             */
            function init() {
                var el = document.getElementById("marquee_replacement");
                el.style.overflow = 'hidden'; //issue is fixed by setting this to auto
                scrollFromBottom();
            }

            var go = 0;
            var timeout = '';
            /**
             * This is where the scroll action happens.
             * Recursive method until stopped.
             */
            function scrollFromBottom() {
                clearTimeout(timeout);
                var el = document.getElementById("marquee_replacement");
                if (el.scrollTop >= el.scrollHeight - 150) {
                    el.scrollTop = 0;
                };
                el.scrollTop = el.scrollTop + speed;
                if (go == 0) {
                    timeout = setTimeout(scrollFromBottom, 50);
                };
            }

            /**
             * Set the stop variable to be true (will stop the marquee at the next pass).
             */
            function stop() {
                go = 1;
            }

            /**
             * Set the stop variable to be false and call the marquee function.
             */
            function startit() {
                go = 0;
                scrollFromBottom();
            }
        </script>

        <!--CSS for Marquee-->
        <style type="text/css">
            #marquee_replacement.scrollbar {
                width: auto;
                height: 150px;
                overflow-y: scroll; /*issue is fixed by setting this to auto*/
            }

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

            #marquee_replacement {
                -ms-overflow-style: none;
                /* IE and Edge */
                scrollbar-width: none;
                /* Firefox */
            }

            #marquee_replacement p.spacer {
                height: 150px;
            }
        </style>
    </main>
</body>

編輯：很抱歉沒有提供最小的可重復示例的新手錯誤。 我將更新上面的代碼以提供一個 MREX，以便將來的讀者更容易理解這個問題。 另外，我解決了這個問題。 如果我將 CSS 和 javascript 部分中的溢出值分別設置為 auto 而不是 scroll 和 hidden，它可以作為自動滾動字幕和手動滾動文本框工作。

Answer 1

setTimeout需要一個函數，而不是帶有代碼的字符串。 這樣做： setTimeout(scrollFromBottom, 50)

Answer 2

我想到了。 如果將來有人需要這個，我必須設置el.style.overflow = 'auto'; 自動而不是隱藏並將CSS溢出設置為overflow-y: auto; 自動而不是滾動。 現在它會自動和手動滾動！

我怎樣才能讓這個 javascript 選框手動滾動？

問題描述

2 個解決方案

解決方案1
0 2020-08-25 23:53:51

解決方案2
0 2020-08-26 05:37:40

我怎樣才能讓這個 javascript 選框手動滾動？

問題描述

2 個解決方案

解決方案1 0 2020-08-25 23:53:51

解決方案2 0 2020-08-26 05:37:40

解決方案1
0 2020-08-25 23:53:51

解決方案2
0 2020-08-26 05:37:40