Форум

dezzignet · #1 (**permalink**) 14.03.2016, 05:18

Есть широкие таблицы, которые никак не вписываются в ширину сайта.
Простой CSS overflow-x: scroll; не всегда уместен, т.к таблицы бывают длинные в высоту и чтобы передвинуть содержимое таблицы приходится листать вниз до скроллбара.
Может кто знает как реализовать такой скролл, чтобы пользователь нажимал левую кнопку мыши и удерживая перемещал контент, который не влез в ширину блока.

Dilettante_Pro · #2 (**permalink**) 15.03.2016, 17:26

dezzignet,
Вот простенький макет

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Скроллинг мышью</title>
<style type="text/css">
.scroll 
{   position:absolute;
    top:10px;
    left:100px;
	height: 100px;
	overflow-x: auto;
	width: 200px;
       cursor: all-scroll;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var scr = $(".scroll");
        scr.mousedown(function () {
            var startX = this.scrollLeft + event.pageX;
            var startY = this.scrollTop + event.pageY;
            scr.mousemove(function () {
                this.scrollLeft = startX - event.pageX;
                this.scrollTop = startY - event.pageY;
                return false;
            });
        });
        $(window).mouseup(function () {
            scr.off("mousemove"); 
        });
    }
</script>

</head>
<body>
<div class="scroll">
<table>
<tr>
  <td>111111</td><td>222222</td><td>333333</td><td>444444</td><td>555555</td><td>666666</td>
</tr>
<tr>
  <td>211111</td><td>222222</td><td>333333</td><td>444444</td><td>555555</td><td>666666</td>
</tr>
<tr>
  <td>311111</td><td>222222</td><td>333333</td><td>444444</td><td>555555</td><td>666666</td>
</tr>
<tr>
  <td>411111</td><td>222222</td><td>333333</td><td>444444</td><td>555555</td><td>666666</td>
</tr>
<tr>
  <td>511111</td><td>222222</td><td>333333</td><td>444444</td><td>555555</td><td>666666</td>
</tr>
<tr>
  <td>611111</td><td>222222</td><td>333333</td><td>444444</td><td>555555</td><td>666666</td>
</tr>
<tr>
  <td>711111</td><td>222222</td><td>333333</td><td>444444</td><td>555555</td><td>666666</td>
</tr>
</table>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript