Проверка скроллинга
В редакторе
Проверка скроллинга
alexanderwebdis
917
2018-12-05 15:55:28
<table>
<tbody>
<tr>
<th>Заголовок скроллируемого поля</th>
</tr>
<tr>
<td>Здесь содержится текст, который не вмещается в ячейку, для его просмотра необходимо нажать левой кнопкой мыши по тексту и зажав левую кнопку двигать мышью в правую сторону.</td>
</tr>
</tbody>
</table>
table {
border: 1px solid #222;
}
td, th {
border: 1px solid #222;
}
tr {
height: 16px;
}
td {
overflow: hidden;
white-space: nowrap;
max-width: 250px;
}
$(document).ready(function () {
$('table').on('mousedown', 'td', function(event) {
/*Снимается выделение содержимого*/
clearSelection();
CURSOR_POSITION = mouseShowHandler(event);
var td_ = $(this);
$(this).closest('body').on('mousemove', function(event) {
currentScrollLeft = Math.round(td_.scrollLeft());
elem_id = '';
bias_ = execute_handler_scrolling(event,elem_id);
td_.scrollLeft(currentScrollLeft+bias_*10);
tempScrollLeft = Math.round(td_.scrollLeft());
console.log(' mouseup '+' currentScrollLeft '+currentScrollLeft+' tempScrollLeft '+tempScrollLeft+' bias_*10 '+bias_*10);
});
$(this).closest('body').on('mouseup', function(event) {
$(this).unbind();
});
//return false;
});
});
function clearSelection() {
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
};
function mouseShowHandler(e){
e = e || window.event;
if (e.pageX == null && e.clientX != null ) {
var html = document.documentElement;
var body = document.body;
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
}
return e.pageX;
};
function execute_handler_scrolling(event,id) {
var type = event.type;
var bias_ = 0;
//console.log(mouseShowHandler(event));
//if (type == 'mousemove'){
//движение влево
//console.log(mouseShowHandler(event));
curor_pos_now = mouseShowHandler(event);
//движение влево
if (CURSOR_POSITION>curor_pos_now) bias_ = -1;
//движение вправо
if (CURSOR_POSITION<curor_pos_now) bias_ = 1;
CURSOR_POSITION = mouseShowHandler(event);
return bias_;
//}
}
var CURSOR_POSITION = 0;
var COEF_MOVE = 1;
var width_change = false; //флаг подтверждающий, что ширина столбца была изменена
var MAX_WIDTH =1020;
var MIN_WIDTH =0;
var tempScrollLeft, currentScrollLeft = 0;
var MIN_HEIGHT_TH = 32; //минимальная допустимая высота шапки таблицы в px
Войдите для добавления комментария.