容器内子元素的横向滚动交互

By minirplus on 2023-01-11 in DEV

实现当容器内部元素超出容器宽度时通过拖拽进行滚动

首先在子元素增加样式，设置为内嵌block

1 2	$("div#planCard").css('display','inline-block'); $("div#planCard").css('float','none');

再在父元素增加样式，将容器的溢出模式改为滚动条

1	<div class="card-body" style="overflow-x: scroll;white-space: nowrap;">

再在全局增加样式，隐藏滚动条

::-webkit-scrollbar {

display: none;

}

这时如果想要看到溢出的内容就只能通过鼠标的横向滚轮进行滚动了

为了增加体验，可以再增加拖动方式滚动

// drag plan horizontal

const slider = document.querySelector('.card-body');

let mouseDown = false;

let startX, scrollLeft;

let startDragging = function (e) {

mouseDown = true;

startX = e.pageX - slider.offsetLeft;

scrollLeft = slider.scrollLeft;

};

let stopDragging = function (event) {

mouseDown = false;

};

slider.addEventListener('mousemove', (e) => {

e.preventDefault();

if(!mouseDown) { return; }

const x = e.pageX - slider.offsetLeft;

const scroll = x - startX;

slider.scrollLeft = scrollLeft - scroll;

});

// Add the event listeners

slider.addEventListener('mousedown', startDragging, false);

slider.addEventListener('mouseup', stopDragging, false);

slider.addEventListener('mouseleave', stopDragging, false);