在Angular 7 CDK中,可以使用cdkDragHandle
指令来解决拖放干扰滚动的问题。通过将该指令应用在滚动容器的元素上,可以禁用拖动行为,从而避免干扰滚动。
下面是一个示例,演示如何在Angular 7 CDK中使用cdkDragHandle
来解决拖放干扰滚动的问题:
首先,在组件的HTML模板中,将cdkDragHandle
应用在滚动容器的元素上:
然后,在组件的CSS样式中,设置滚动容器的样式,以及应用CDK的样式:
.scroll-container {
overflow: auto;
height: 200px; /* 滚动容器的高度 */
}
.cdk-drag-handle {
cursor: move;
}
最后,在组件的Typescript代码中,确保导入了CdkDragHandle
指令:
import { CdkDragHandle } from '@angular/cdk/drag-drop';
这样,通过将cdkDragHandle
应用在滚动容器的元素上,可以使其成为拖动的触发区域,从而避免拖动行为干扰滚动。
希望这个解决方法能帮助到你!