el-popover弹出框的滚动条怎么设置拖拽滚动
时间: 2023-10-18 21:17:04 浏览: 97
弹出框随滚动条滚动
您可以使用CSS样式来为el-popover弹出框添加滚动条,然后使用JavaScript来实现拖拽滚动。
CSS样式:
```
.el-popover__wrapper {
max-height: 200px; /* 设置最大高度 */
overflow-y: auto; /* 添加垂直滚动条 */
}
```
JavaScript代码:
```
var elPopover = document.querySelector('.el-popover__wrapper');
var isDragging = false;
var startY = 0;
var scrollTop = 0;
elPopover.addEventListener('mousedown', function(e) {
isDragging = true;
startY = e.clientY;
scrollTop = elPopover.scrollTop;
});
elPopover.addEventListener('mousemove', function(e) {
if (isDragging) {
var diffY = e.clientY - startY;
elPopover.scrollTop = scrollTop - diffY;
}
});
elPopover.addEventListener('mouseup', function() {
isDragging = false;
});
```
这段代码添加了一个mousedown事件监听器,当用户按下鼠标时,isDragging变量将设置为true,同时保存当前的scrollTop值和鼠标的起始位置。然后,添加一个mousemove事件监听器,当用户移动鼠标时,如果isDragging为true,则计算鼠标移动距离diffY,并将scrollTop设置为原始scrollTop值减去diffY。最后,添加一个mouseup事件监听器,在用户松开鼠标时将isDragging变量设置为false,停止滚动。
这样,您就可以为el-popover弹出框添加滚动条,并实现拖拽滚动了。
阅读全文