javascript - 单向滚动 : horizontal OR vertical

Question

我正在寻找一种仅在 html 表格 View 中水平或垂直滚动​​同时保持始终可见的标题和行的方法。最好我想要类似于 this 的东西但在没有 ember 或 coffeescript 的纯 Javascript 中。我不喜欢使用 ember-table，因为我的元素的其余部分不是基于 ember，而且我不熟悉它。

所以我从类似的东西开始 here .它具有标题行和列的好处，但它在水平方向和垂直方向上都滚动。此示例与第一个示例之间的区别在于 addepar 表仅在一个方向上滚动。这是一种更平静的用户体验。

我一直在寻找到达我想要的地方的可能方法。第一部分似乎是检查用户滚动的方向。这样的事情可以用 jQuery 来完成；

var previousScrollvertical = 0,
    previousScrollHorizontal = 0;

$(window).scroll(function(){

   var currentVerticalScroll = $(this).scrollTop(),
       currentHorizontalScroll = $(this).scrollLeft();

   if(currentVerticalScroll==previousScrollvertical) {
           if (currentHorizontalScroll > previousScrollHorizontal){
               console.log('Right');
           } else {
              console.log('left');
           }
   } else if(currentHorizontalScroll==previousScrollHorizontal) {
           if (currentVerticalScroll > previousScrollvertical){
               console.log('down');
           } else {
              console.log('up');
           }
   }

   previousScrollHorizontal = currentHorizontalScroll;
   previousScrollvertical =currentVerticalScroll;
});

这段代码适用于任何加载了 jQuery 的网站。您可以从控制台尝试一下。

但是从这里我似乎被卡住了。是否可以使用 jQuery 阻止滚动方向？有没有更简单的方法来实现这一目标？我应该考虑一条完全不同的路线吗？

Answer 1

简短的回答是使用 jQuery 的 scrollTop 或 scrollLeft 将要阻止的方向的滚动设置回原来的方向。

我创建了一个简单的示例来展示如何在实践中做到这一点:

Live Demo

var $container = $('.table-container');
var $table = $container.find('table');

var previousScroll = [0, 0];
var correction = false;

// Adjust the threshold to a larger number if you'd like it
// to take longer to switch between horizontal and vertical
// scrolling
var threshold = 10;
var direction;
var directionTimeout;

$container.on('scroll', function (event) {
    if (!correction) {
        var element = event.currentTarget,
            $element = $(event.currentTarget),
            x = element.scrollLeft,
            y = element.scrollTop;

        var diff = [
            Math.abs(x - previousScroll[0]),
            Math.abs(y - previousScroll[1])
        ];

        correction = true;

        if (!direction) {
            if (diff[0] > diff[1]) {
                direction = 'horizontal';
            } else if (diff[0] < diff[1]) {
                direction = 'vertical';
            } else {
                direction = 'vertical';
            }
        }

        if (direction === 'horizontal') {
            $element.scrollTop(previousScroll[1]);
            previousScroll = [x, previousScroll[1]];
        } else {
            $element.scrollLeft(previousScroll[0]);
            previousScroll = [previousScroll[0], y];
        }

        clearTimeout(directionTimeout);
        directionTimeout = setTimeout(function () {
            direction = null;
        }, threshold);
    } else {
        correction = false;
    }
});