我怎样才能让这个 javascript 选框手动滚动？

Question

I am trying to make an automatic scrolling marquee using javascript and CSS but, I also want to be able to manually scroll the marquee with the mouse wheel.我正在尝试使用 javascript 和 CSS 制作一个自动滚动字幕，但我也希望能够使用鼠标滚轮手动滚动字幕。 The marquee functions as expected ie.选框按预期运行，即。 it scrolls automatically and loops well but I can't figure out how to incorporate manual scrolling.它会自动滚动并很好地循环，但我不知道如何合并手动滚动。 Here is the code that I am using.这是我正在使用的代码。 Any ideas?有任何想法吗？

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

Edit: Sorry for the newbie mistake of not providing a minimal reproducible example.编辑：很抱歉没有提供最小的可重复示例的新手错误。 I will update the code above to provide an MREX so that the issue is easier to understand for future readers.我将更新上面的代码以提供一个 MREX，以便将来的读者更容易理解这个问题。 Also, I solved the issue.另外，我解决了这个问题。 If I set the overflow values in both CSS and javascript portions to auto instead of scroll and hidden respectively it works as an auto-scrolling marquee and manual scrolling text box.如果我将 CSS 和 javascript 部分中的溢出值分别设置为 auto 而不是 scroll 和 hidden，它可以作为自动滚动字幕和手动滚动文本框工作。

Answer 1

setTimeout takes a function, not a string with code. setTimeout需要一个函数，而不是带有代码的字符串。 Do it like this: setTimeout(scrollFromBottom, 50)这样做： setTimeout(scrollFromBottom, 50)

Answer 2

I figured it out.我想到了。 If anyone needs this in the future I had to set el.style.overflow = 'auto';如果将来有人需要这个，我必须设置el.style.overflow = 'auto'; to auto instead of hidden and set the CSS overflow to overflow-y: auto;自动而不是隐藏并将CSS溢出设置为overflow-y: auto; to auto instead of scroll.自动而不是滚动。 Now it scrolls automatically and manually!现在它会自动和手动滚动！

我怎样才能让这个 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