Javascript:水平自动滚动

时间:2018-06-24 16:30:06

标签: javascript scroll autoscroll

如果用户将容器中的元素拖动到靠近水平边缘的位置,则需要将容器自动滚动到各个方向的末端。

如何改进下面的代码?

    @ViewChild(ChildComponent)
        private childComponent: ChildComponent;

    receiveEmpleado($event) {
        this.empleado = $event
    }

yourMethod() {
       this.childComponent.someproperty=null
    }

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

我不知道当前代码是否有效,但这是一个更有条理的版本。

const scroller={
    speed: 10,
    sensitivity: 10,
    container: document.getElementById("scrollContainer"),
    rect: scroller.container.getBoundingClientRect(),
    interval: null,
    offsetX: 0,
    offsetY: 0
};

scroller.container.addEventListener("touchmove",function(e){
    clearInterval(scroller.interval);
    scroller.interval = null; // May not be needed

    // pointer offset
    scroller.offsetX = e.targetTouches[0].pageX;
    scroller.offsetY = e.targetTouches[0].pageY;

    // the container should scroll
    // pointer is over right / left edge of a scroller.container
    if((scroller.rect.width+scroller.rect.left-scroller.offsetX<=scroller.sensitivity)&&(scroller.offsetY>scroller.rect.top))scroller.interval=setInterval(()=>{scroller.container.scrollLeft+=scroller.speed;},10);
    if((scroller.offsetX-scroller.rect.left<=scroller.sensitivity)&&(scroller.offsetY>scroller.rect.top))scroller.interval=setInterval(()=>{scroller.container.scrollLeft-=scroller.speed;},10);
});