Update bucket bar when scrollable containers are scrolled

The bucket bar updated the location of buckets when the document or root content
element was scrolled, but not when scrollable descendants (eg.  created by
`overflow: scroll`) were scrolled. This is because we were listening for the
`scroll` event, which does not bubble. Use a capture listener instead.

Fixes #5463

src/annotator/bucket-bar-client.ts

@@ -39,7 +39,14 @@ export class BucketBarClient implements Destroyable {
 
     this._listeners.add(window, 'resize', () => this.update());
     this._listeners.add(window, 'scroll', () => this.update());
-    this._listeners.add(contentContainer, 'scroll', () => this.update());
+
+    // Update bucket positions when container or scrollable descendants are
+    // scrolled.
+    this._listeners.add(contentContainer, 'scroll', () => this.update(), {
+      // "scroll" event does not bubble, so use a capture listener to observe
+      // event in descendants.
+      capture: true,
+    });
   }
 
   destroy() {

src/annotator/test/bucket-bar-client-test.js

@@ -66,6 +66,19 @@ describe('BucketBarClient', () => {
     assert.calledWith(fakeRPC.call, 'anchorsChanged');
   });
 
+  it('should update buckets when descendant of contentContainer element scrolls', async () => {
+    createBucketBarClient();
+
+    const scrollBox = document.createElement('div');
+    contentContainer.append(scrollBox);
+
+    scrollBox.dispatchEvent(new Event('scroll'));
+    await delay(0);
+
+    assert.calledOnce(fakeRPC.call);
+    assert.calledWith(fakeRPC.call, 'anchorsChanged');
+  });
+
   describe('#destroy', () => {
     it('stops listening for events', async () => {
       const bucketBarClient = createBucketBarClient();