»
(053)JS中DOM元素的绝对坐标
JS中DOM元素的绝对坐标:
var floatDIv=document.getElementById("floatDiv");
var rightPosition=floatDiv.offsetLeft+floatDiv.offsetWidth;
console.log(rightPosition);
offset***是初始加载时的值,offset***的坐标值为相对于窗口左上角的绝对坐标,单位为像素,offset***的值是不随scrollTo操作而改变的值。
offset属性只读,要改变offset***的值,只有一种方法,那就是通过style的left来修改offset,也就是:element.style.left=left+"px";来改变。
所以,计算scrollTo的距离,只要计算初始加载时的位置差即可,不需要去通过style修改offset的值。
滚动DIV效果JS实现:
function scrollToALeftDiv(leftArrowDiv){
var parentDiv= leftArrowDiv.nextElementSibling;
console.log("scrollALeftDiv", parentDiv);
if(!parentDiv){
console.log("不存在滑动窗口");
}else{
for(var i = parentDiv.children.length - 1; i >=0 ; i--){
var childDiv= parentDiv.children[i];
if(childDiv.offsetLeft - parentDiv.offsetLeft < parentDiv.scrollLeft - 10){
var distance= childDiv.offsetLeft - parentDiv.offsetLeft;
parentDiv.scrollTo({left: distance, behavior: "smooth"})
break;
}
}
}
}
function scrollToARightDiv(rightArrowDiv){
var parentDiv= rightArrowDiv.previousElementSibling;
console.log("scrollToARightDiv", parentDiv);
if(!parentDiv){
console.log("不存在滑动窗口");
}else{
for(var i = 0; i < parentDiv.children.length; i++){
var childDiv= parentDiv.children[i];
if(childDiv.offsetLeft + childDiv.offsetWidth - (parentDiv.offsetLeft + parentDiv.offsetWidth) > parentDiv.scrollLeft + 10){
var distance= childDiv.offsetLeft+childDiv.offsetWidth - (parentDiv.offsetLeft+parentDiv.offsetWidth);
parentDiv.scrollTo({left: distance, behavior: "smooth"})
break;
}
}
}
}
其中,overflow:hidden的DIV的平滑滑动操作过程为scrollableDiv.scrollTo({left: originalPositionOffsetDelta, behavior: "smooth"});
而获取当前scroll值的方法为:scrollableDiv.scrollLeft;
————www.v-signon.com学习者共勉