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,143 @@
+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);
+  }
+}