Прокрутка мыши с прокруткой вниз не работает, когда мышь находится на сетке - ui-grid angular js

Question

Для моей работы с угловыми сетками js я использую ui-grid (v3.1.1) для реализации таблицы сетки. Когда я изменяю размер страницы, у меня возникают проблемы с прокруткой вниз с помощью мыши. Когда я нависаю над мышью на полосе прокрутки, тогда прокрутка вверх и вниз обе работают нормально. Как ни странно, прокрутка вверх, используя колесико мыши, отлично работает. Это просто прокрутка вниз, которая, похоже, не работает. Я не понимаю причину этого.

Я отключил прокрутки, когда не требуется использования:

.ui-grid-render-container-body .ui-grid-viewport { 
     overflow: auto !important; 
    } 

Кроме этого, я не изменил какой-либо из параметров по умолчанию. Почему прокрутка прокрутки мыши не будет работать, когда она зависает над ui-сеткой? Пожалуйста, помогите

Answer 1

Я прокомментировал event.preventDefault() по строке 2859 из v4.0.2 (в функции gridUtil.on.mousewheel).

Не могу сказать, какое другое влияние это может иметь, но работал для моего использования.

Answer 2

Опытный этот вопрос о перетаскивании мышц/трекпада в версии 4.0.0 & v4.0.3 в сетке с разбивкой по страницам & фильтрация включена и с изменениями CSS, чтобы включить перенос слов в ячейке.

.ui-grid-viewport .ui-grid-cell-contents { 
    word-wrap: break-word; 
    white-space: normal !important; 
    overflow:visible; 
} 

.ui-grid-cell { 
    display : table-cell; 
    height: auto !important; 
    overflow:visible; 
    position: static; 
} 

.ui-grid-row { 
    height: auto !important; 
    display : table-row; 
    position: static; 
} 

.ui-grid-row div[role=row] { 
    display: flex ; 
    align-content: stretch; 
} 

Исправлено исправление Tried Paul, и оно сработало, но требует изменения кода ядра. Кроме того, наши требования призваны отображать всю таблицу на странице на основе данных, а не таблицы с фиксированной высотой с прокруткой. Поэтому мы не могли использовать.

Вместо этого я работал над проблемой, применяя решение динамической высоты сетки.

Добавлено нг-стиль сетки следующим образом:

<div ui-grid="gridOptions" style="float:left" ui-grid-selection ui-grid-pagination ng-style="gridHeight()" class="myGrid"></div> 

Disabled сетки прокрутки:

$scope.gridOptions.enableHorizontalScrollbar = 0; 
    $scope.gridOptions.enableVerticalScrollbar = 0; 

Написал функцию gridHeight следующим образом (использует JQuery):

$scope.gridHeight = function() { 

     var outerHeight = 50; //buffer for things like pagination 

     $('.ui-grid-row').each(function() { 
     outerHeight += $(this).outerHeight(); 
     }); 

     $('.ui-grid-header').each(function() { 
     outerHeight += $(this).outerHeight(); 
     }); 

     return { height: outerHeight+"px"}; 
    }; 

Этот удовлетворены нашими требованиями.

Answer 3

Другой способ решить эту проблему - если сетка не имеет прокрутки по крайней мере - это переопределить прототип функции atTop & atBottom на ScrollEvent uigrid в. Это не потребует изменений в коде uigrid, нужно просто ввести ScrollEvent в контроллер или app.run(). Сетка проглатывает любое событие прокрутки, если его можно прокручивать, но не обрабатывает его, если нет полос прокрутки. Исходный код также не проходит проверку isNaN на this.y.percentage - я думаю, что это должно быть так, как в комментарии ниже.

ScrollEvent.prototype.atTop = function(scrollTop) { 
    return true; 
    //return (this.y && (this.y.percentage === 0 || isNaN(this.y.percentage) || this.verticalScrollLength < 0) && scrollTop === 0); 
}; 

ScrollEvent.prototype.atBottom = function(scrollTop) { 
    return true; 
    //return (this.y && (this.y.percentage === 1 || isNaN(this.y.percentage) || this.verticalScrollLength === 0) && scrollTop > 0); 
};