JavaScript限定范围拖拽及自定义滚动条应用(3)

两个对象:div1 和 div2,其中div1是div2的父元素,div2只能在div1的范围内拖拽

JavaScript限定范围拖拽及自定义滚动条应用(3)_第1张图片

图中,红点是鼠标的位置,两个绿色箭头相减的结果就是disX,最后oEvent.clientX - disX 就是绿色箭头的部分,这个长度就是判断是否“出格”的依据,也就是这个短的绿色箭头范围应该在0 ~ div2.offsetWidth - div1.offsetWidth之间!




 
 客户区可见范围限制拖拽
 


 

基于上述原理,我们来做一个自定义滚动条,通过拖拽滚动条的位置来控制另一个对象的大小,比如一幅图。

JavaScript限定范围拖拽及自定义滚动条应用(3)_第2张图片

JavaScript限定范围拖拽及自定义滚动条应用(3)_第3张图片




 
 自定义滚动条
 


 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(JavaScript限定范围拖拽及自定义滚动条应用(3))