Html滚动：如何避免它“切割”我的内在元素

Question

这个问题是针对我必须要执行的自动完成下拉列表，当您在html文本框中书写时，该列表将会触发。

它基本上由一个包含建议元素的div组成，每个元素都是一个div。

我已经开始正常工作，但现在我添加了一个垂直滚动到包含div，所以你可以限制下拉列表的高度，我有以下行为：

如果你使用滚动，它会以“像素”向上或向下滚动，因此它会切割我的元素，使它看起来都很整洁。

当你使用滚动时，我想覆盖一下整个div元素的行为。我甚至不知道如何谷歌...

任何人都知道有关这方面的任何有用资源，或者可以提供关于从何处开始的任何提示，如果可以覆盖滚动运动事件或我应该调查另一个方向？

提前多多感谢

注意：我不能使用jquery自动完成插件。

Answer 1

您可以使用鼠标事件并手动更新位置来实现自己的滚动条。

Answer 2

你是否可以点击该元素的'scroll'事件（DOM 3 Events为元素提供了一个滚动事件，不确定它是如何支持的），这样每当滚动位置改变时，它会调用一个小例程您自己通过将其四舍五入到最近的'缺口'来调整滚动位置？

或者，您可以定期轮询滚动位置并在移动时进行调整。 This scroll position似乎相当跨浏览器。

Answer 3

首先：

使用您自己的滚动条，创建一个滚动事件处理程序。在这里，您可以使用delta上的动画（位于evt中），您可以在其上方通过顶部或底部的scrollTop自行设置元素的offsetHeight可见元素。此外，如果div高度切断一个元素，只需使前一个或下一个元素稍微“更高”，也可以设置它的高度来向上或向下推动切断元素。

第二

你可以“修补”div，这样只会看到几个元素。当您滚动时，隐藏顶部并在动画中显示底部，而不使用s crollTop或scrollHeight。

注意Firefox中的滚动事件。它有另一个名称，但您可以像这样测试它：

eventName = eventName === 'mousewheel' ? ((/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : eventName) : eventName;

祝你好运。如果您在大约2天内需要任何帮助，我将实施它，因为我也需要它。

Answer 4

这根本无法完成，没有解决方案，期限。一个人必须忍受这个限制。

为什么没有解决方案？

因为即使你实现了自己的滚动条，你仍然需要依赖滚动事件，这些事件既不会被取消也不会被阻止冒泡到body元素。真的，他们不能，你可以调用preventDefault（）和stopPropagation（），直到奶牛回家，他们仍然泡沫。这是标准化机构和浏览器实现者的慎重决定。

如果滚动事件可以取消，EхpеrtEхchangе可能会阻止您滚动到页面底部以查看答案;）（别担心，我在“EхpеrtEхchangе”中使用了一些西里尔字母，因此它们无法获得可转换的提）。