如何同时使用Math.max()和Math.min()来绑定滚动块?

How Do I Use Both Math.max() and Math.min() to bound my dragger

本文关键字：Math 绑定 滚动 min max 何同时      更新时间：2023-09-26

我正在构建一个水平拖动页面布局。有3列，有两个拖动对象。除了设置拖动的最大/最小值外，一切都很好。

布局看起来像这样，两个拖拽条在colB的两侧。

---------------------------
  colA  |  colB  |  colC
        |        |         
        |        |         
        |        |         
        |        |         
        |        |         
        |        |         
        |        |         
        |        |

我需要设置它，使colA的滚动块的最大宽度(即它的左值)等于colC的滚动块。同样，ColC的最小值需要是colA的draggers的左值。

函数是这样的:

function doDragA(e) {
  dragA.style.left = (e.clientX) + 'px';
}
function doDragC(e) {
  dragC.style.left = (e.clientX) + 'px';
}

，我试着这样做:

function doDragA(e) {
  var posC = parseInt(document.defaultView.getComputedStyle(dragC).left, 10);
  dragA.style.left = (math.max(posC), math.min(0)) e.clientX + 'px';
}
function doDragC(e) {
  var posA = parseInt(document.defaultView.getComputedStyle(dragA).left, 10);
  dragC.style.left = (math.max(0), math.min(posA)) e.clientX + 'px';
}

但是我得到语法错误。我已经控制台记录的值，他们通过，这只是数学最大/分钟语法我错了。

首先，javascript是区分大小写的，并且数学对象是Math，而不是math。

其次，min和max的用法是提供一个参数列表，而不仅仅是一个-它返回'这些参数中最高/最低的值是多少'的答案。

假设你想让e.clientX的值被valueMax和valueMin的值所包围:

var valueUpToMax = Math.min(valueMax, e.clientX);
var valueAtLeastMin = Math.max(valueMin, e.clientX);
// so we can combine those to bound on both sides:
var boundedValue = Math.max(valueMin, Math.min(valueMax, e.clientX));

看起来它们应该是相反的;我们通过使用Math.min来限制一个最大值，但这是因为我们限制了一个最大值，而不是试图得到一个最大的数值。

一般原则是像在数学中那样使用函数:

c = f(a, b);
e = g(c, d);
-> e = g( f(a, b), d);
相关文章：