Question

我的桌子上的数据往往比屏幕大。

我把桌子放在DIV中并设置＆＃34;溢出＆＃34;到＆＃34;汽车＆＃34;在CSS

div.scrolling-comps {
    width : 970px;
    height : 800px;
    overflow : auto;
}

因此可以使用浏览器的内置滚动条向上/向下滚动DIV。

问题是，表格可以比屏幕更大。当鼠标滚轮向上/向下滚动时，向左/向右滚动是一个痛苦的事情。

所以，寻找一个javascript / jquery或CSS方式滚动div NATURALLY 。

换句话说，当查看huuuge表的人将鼠标向右移动时，DIV会向左移动（因此不使用滚动条滚动）。

与此类似的东西，但是代替跟随鼠标，div将移动与鼠标相对 ...

＆＃13;

window.onload = function() {
  var bsDiv = document.getElementById("box-shadow-div");
  var x, y;
  // On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:
  window.addEventListener('mousemove', function(event) {
    x = event.clientX;
    y = event.clientY;
    if (typeof x !== 'undefined') {
      bsDiv.style.left = x + "px";
      bsDiv.style.top = y + "px";
    }
  }, false);
}

＆＃13;

#box-shadow-div {
  position: fixed;
  width: 1000px;
  height: 800px;
  border-radius: 0%;
  background-color: black;
  box-shadow: 0 0 10px 10px black;
  top: 49%;
  left: 48.85%;
}

＆＃13;

<div id="box-shadow-div"></div>

＆＃13;

Answer 1

关于使用鼠标位置的例子很有意思......但它并不是你实现你所描述的所需要的。

事实上......你需要知道的是＆＃34;比率＆＃34;在div包裹table及其scrollWidth

之间

然后，使用鼠标的X位置，您可以将滚动应用于div，以使其“＃34;移动＆＃34;。

我使用jQuery使用很少的行来完成它。

＆＃13;

// Just to fake a big table
var fakeCell = $("<td>Some data</td>");
for(i=0;i<100;i++){
  var fakeRow = $("<tr>");
  for(k=0;k<50;k++){
    fakeRow.append(fakeCell.clone().append(" "+k));
  }
  $("#test").append(fakeRow.clone());
}
// ---------------------------------------------------


// Calculate the "ratio" of the box-div width versus its scrollable width
var ratio = $("#box-div")[0].scrollWidth / $("#box-div").width();
console.log("Ratio: "+ratio);

// Scroll left/rigth based on mouse movement
$(window).on("mousemove", function(e){
  var X = ratio * e.pageX;
  
  // Scroll the div using the mouse position multiplyed by the ratio
  $("#box-div").scrollLeft(X);
});

＆＃13;

td{
  white-space: nowrap;
  border: 1px solid black;
}
#box-div{
  overflow:auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="box-div">
    <table id="test">
    </table>
  </div>
</body>

＆＃13;

因此，当用户将鼠标移动到div的宽度上时，您应用滚动乘以比率...效果是用户可以从最左侧到最右侧轻松滚动它。 / p>

Answer 2

您是否尝试过将x更改为-x？这将在技术上＆＃34;反转＆＃34;效果。

＆＃13;

window.onload = function() {
  var bsDiv = document.getElementById("box-shadow-div");
  var x, y;
  // On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:
  window.addEventListener('mousemove', function(event) {
    x = event.clientX;
    y = event.clientY;
    if (typeof x !== 'undefined') {
      bsDiv.style.left = -x + "px";
      bsDiv.style.top = -y + "px";
    }
  }, false);
}

＆＃13;

#box-shadow-div {
  position: fixed;
  width: 1000px;
  height: 800px;
  border-radius: 0%;
  background-color: black;
  box-shadow: 0 0 10px 10px black;
  top: 49%;
  left: 48.85%;
}

＆＃13;

<div id="box-shadow-div"></div>

＆＃13;

移动一个与鼠标移动相反的大div

2 个答案: