Прокрутка в одном направлении: горизонтальное ИЛИ вертикальное

Question

Прокрутка в одном направлении: горизонтальное ИЛИ вертикальное

0

Я ищу способ прокручивать горизонтальный или вертикальный внутри представления таблицы html, сохраняя при этом заголовок и строку, которые всегда видны. Предпочтительно, я хотел бы что-то подобное этому, но в чистом Javascript без ember или coffeescript. Я предпочитаю не использовать таблицу ember-table, потому что остальная часть моего проекта не основана на ember, и я не знаком с ним.

Поэтому я начал с чего-то подобного здесь. Он имеет преимущество в том, что он имеет строку заголовка и столбец, но он прокручивается как в горизонтальном направлении, так и в вертикальном направлении. Разница между этим примером и первым заключается в том, что таблица 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? Есть ли более простой способ достичь этого? Должен ли я рассматривать совершенно другой маршрут?

cantdutchthis 02 дек. 2013, в 16:25

Источник

1

Для пояснения: вы хотите чистый javascript или javascript с jQuery? И вы можете использовать CSS overflow-x:hidden чтобы остановить другое направление при движении вверх и вниз, а затем разрешить его снова после остановки прокрутки. То же самое для горизонтальной прокрутки
Zach Saucier 02 дек. 2013, в 15:53

Теги:

javascript

jquery

css

html-table

1 ответ

Ещё вопросы

Для пояснения: вы хотите чистый javascript или javascript с jQuery? И вы можете использовать CSS overflow-x:hidden чтобы остановить другое направление при движении вверх и вниз, а затем разрешить его снова после остановки прокрутки. То же самое для горизонтальной прокрутки

Nate · Accepted Answer · 2013-12-02T14-08-00.000Z

Короткий ответ заключается в использовании jQuery scrollTop или scrollLeft чтобы установить прокрутку направления, которое вы хотите заблокировать, до того, что было раньше.

Я создал быстрый пример, который показывает, как это можно сделать на практике:

Демо-версия

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;
    }
});