在JavaScript和jQuery中，`scroll()` 事件是一个非常常见的用于监听元素滚动的事件。当用户滚动元素时，这个事件会被触发。然而，在某些情况下，我们可能需要区分是横向滚动还是纵向滚动，特别是在页面中存在多个可滚动区域时。本文将详细介绍如何使用jQuery的 `scroll()` 方法来区分横向和纵向滚动条。
我们要明白 `scrollLeft` 和 `scrollTop` 属性的作用。`scrollLeft` 用于获取或设置元素的水平滚动位置，而 `scrollTop` 则用于获取或设置元素的垂直滚动位置。当我们监听 `scroll` 事件时，可以通过比较当前的 `scrollLeft` 和 `scrollTop` 值与之前记录的值来判断滚动的方向。
在提供的代码示例中，我们首先遍历所有的 `div` 元素，并使用 `data()` 方法存储每个元素的初始 `scrollLeft` 和 `scrollTop` 值。这样做是为了后续比较滚动前后的变化：
```javascript
$('div').each(function() {
$(this).data('slt', { sl: this.scrollLeft, st: this.scrollTop });
});
```
接着，我们为每个 `div` 元素绑定 `scroll` 事件处理器：
```javascript
$('div').scroll(function() {
var sl = this.scrollLeft,
st = this.scrollTop,
d = $(this).data('slt');
// 检查scrollLeft是否改变，如果是则表示横向滚动
if (sl != d.sl) {
alert('横向滚动');
}
// 检查scrollTop是否改变，如果是则表示纵向滚动
if (st != d.st) {
alert('纵向滚动');
}
// 更新存储的scrollLeft和scrollTop值
$(this).data('slt', { sl: sl, st: st });
});
```
在这个事件处理器中，我们获取当前的 `scrollLeft` 和 `scrollTop` 值，并与之前存储的值进行比较。如果 `scrollLeft` 发生变化，那么就提示横向滚动；如果 `scrollTop` 发生变化，那么就提示纵向滚动。我们将新的 `scrollLeft` 和 `scrollTop` 值存储回数据属性 `slt`，以便下次滚动事件发生时进行比较。
这种方法的优点在于，它不需要使用全局变量，而是通过jQuery的数据存储功能来跟踪每个元素的滚动状态。这样可以很好地处理页面上多个滚动条的情况，避免了全局变量可能导致的混乱和冲突。
总结起来，通过jQuery的 `scroll()` 事件配合 `scrollLeft` 和 `scrollTop` 属性，我们可以轻松地识别用户是在横向还是纵向滚动。这种技术在开发需要对滚动行为做出不同响应的应用或网站时非常有用。结合数据存储功能，我们可以针对每一个独立的滚动元素进行精确的控制，实现更丰富的交互效果。
