Add an example of scrolling in CDK Drag and Drop

src/cdk/drag-drop/drag-drop.md

@@ -280,3 +280,10 @@ This example shows how you can set up a table which supports re-ordering of tabs
 #### Sortable tabs
 Example of how to add sorting support to a `mat-tab-group`.
 <!-- example(cdk-drag-drop-tabs) -->
+
+#### Scrollable container
+If your draggable items are inside a scrollable container (e.g., a div with overflow: auto)
+automatic scrolling will not work unless the scrollable container has the `cdkScrollable` directive. 
+Without it, the CDK cannot detect or control the scroll behavior of the container during drag 
+operations.
+<!-- example(cdk-drag-drop-scrollable) -->

src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.css

@@ -0,0 +1,54 @@
+.example-container {
+  height: 20rem;
+  overflow: auto;
+}
+
+.example-list {
+  width: 500px;
+  max-width: 100%;
+  border: solid 1px #ccc;
+  min-height: 60px;
+  display: block;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.example-box {
+  padding: 20px 10px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: white;
+  font-size: 14px;
+}
+
+.cdk-drag-preview {
+  border: none;
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+  border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.html

@@ -0,0 +1,7 @@
+<div class="example-container" cdkScrollable>
+  <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
+    @for (elementName of elementNames; track elementName) {
+      <div class="example-box" cdkDrag>{{elementName}}</div>
+    }
+  </div>
+</div>

src/components-examples/cdk/drag-drop/cdk-drag-drop-scrollable/cdk-drag-drop-scrollable-example.ts

@@ -0,0 +1,138 @@
+import {Component} from '@angular/core';
+import {CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray} from '@angular/cdk/drag-drop';
+import {CdkScrollable} from '@angular/cdk/scrolling';
+
+/**
+ * @title Drag&Drop scrollable
+ */
+@Component({
+  selector: 'cdk-drag-drop-scrollable-example',
+  templateUrl: 'cdk-drag-drop-scrollable-example.html',
+  styleUrl: 'cdk-drag-drop-scrollable-example.css',
+  imports: [CdkDropList, CdkDrag, CdkScrollable],
+})
+export class CdkDragDropScrollableExample {
+  elementNames = [
+    'Hydrogen',
+    'Helium',
+    'Lithium',
+    'Beryllium',
+    'Boron',
+    'Carbon',
+    'Nitrogen',
+    'Oxygen',
+    'Fluorine',
+    'Neon',
+    'Sodium',
+    'Magnesium',
+    'Aluminum',
+    'Silicon',
+    'Phosphorus',
+    'Sulfur',
+    'Chlorine',
+    'Argon',
+    'Potassium',
+    'Calcium',
+    'Scandium',
+    'Titanium',
+    'Vanadium',
+    'Chromium',
+    'Manganese',
+    'Iron',
+    'Cobalt',
+    'Nickel',
+    'Copper',
+    'Zinc',
+    'Gallium',
+    'Germanium',
+    'Arsenic',
+    'Selenium',
+    'Bromine',
+    'Krypton',
+    'Rubidium',
+    'Strontium',
+    'Yttrium',
+    'Zirconium',
+    'Niobium',
+    'Molybdenum',
+    'Technetium',
+    'Ruthenium',
+    'Rhodium',
+    'Palladium',
+    'Silver',
+    'Cadmium',
+    'Indium',
+    'Tin',
+    'Antimony',
+    'Tellurium',
+    'Iodine',
+    'Xenon',
+    'Cesium',
+    'Barium',
+    'Lanthanum',
+    'Cerium',
+    'Praseodymium',
+    'Neodymium',
+    'Promethium',
+    'Samarium',
+    'Europium',
+    'Gadolinium',
+    'Terbium',
+    'Dysprosium',
+    'Holmium',
+    'Erbium',
+    'Thulium',
+    'Ytterbium',
+    'Lutetium',
+    'Hafnium',
+    'Tantalum',
+    'Tungsten',
+    'Rhenium',
+    'Osmium',
+    'Iridium',
+    'Platinum',
+    'Gold',
+    'Mercury',
+    'Thallium',
+    'Lead',
+    'Bismuth',
+    'Polonium',
+    'Astatine',
+    'Radon',
+    'Francium',
+    'Radium',
+    'Actinium',
+    'Thorium',
+    'Protactinium',
+    'Uranium',
+    'Neptunium',
+    'Plutonium',
+    'Americium',
+    'Curium',
+    'Berkelium',
+    'Californium',
+    'Einsteinium',
+    'Fermium',
+    'Mendelevium',
+    'Nobelium',
+    'Lawrencium',
+    'Rutherfordium',
+    'Dubnium',
+    'Seaborgium',
+    'Bohrium',
+    'Hassium',
+    'Meitnerium',
+    'Darmstadtium',
+    'Roentgenium',
+    'Copernicium',
+    'Nihonium',
+    'Flerovium',
+    'Moscovium',
+    'Livermorium',
+    'Tennessine',
+    'Oganesson',
+  ];
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.elementNames, event.previousIndex, event.currentIndex);
+  }
+}