HTML JS和CSS列表选取框无法正确显示

Question

我已经修改了显示滚动字幕的简单HTML列表的代码。 您可以在此处看到：我有3个无法解决的问题：

1. JS：我希望选框显示出从左侧消失后又从右侧再次输入的文本，就像连续选框一样，我该怎么办？

2. CSS：我注意到（a）选框中的一些瑕疵，我认为这是由于选框文本和div的边距/填充没有正确设置所致； （b）较浅的蓝色div阴影遮盖了选取框。（我认为这可能是z-indez问题？）。 （b）与任何浏览器一起出现，（a）仅与chrome一起使用，firefox看起来还可以。 我该如何解决？

   这是屏幕截图：

3. 我可以成功地从数据库加载数据并将其附加到选取框。 现在，我想每隔X秒“刷新”选取框的内容，在底部添加一个时可以删除列表的顶部元素，还是最好淡出，更新所有内容并再次淡入？ 还有其他方法吗？

Answer 1

这是一个简单的示例 ，用于从相反侧滚动它们。 同样，如果您采用这种方法，您也可以根据需要简单地在数组中添加或删除新项。 观看此视频，大约2到3次将添加新项目。 需要注意的一件事是，确保带有id文本的div的宽度比所有可见项的长度加上下一行的长度还要宽。