Portable electronic device, method, and graphical user interface for displaying a vertical bar with scrollable content

A non-transitory computer-readable storage medium storing one or more programs configured to be executed by one or more processors of an electronic device with a display and one or more input devices, the one or more programs including instructions for:

• displaying, via the display, a portion of scrollable content, wherein the displayed portion of the scrollable content has a vertical position in the scrollable content;
• displaying, via the display, a vertical bar concurrently with the displayed portion of the scrollable content, wherein the vertical bar has a vertical position that corresponds to the vertical position in the scrollable content of the displayed portion of the scrollable content;
• detecting, via the one or more input devices, a user input corresponding to translating the scrollable content in a first direction;
• in response to detecting the user input corresponding to translating the scrollable content in the first direction:
• translating the scrollable content in a direction corresponding to the first direction so that a new portion of the scrollable content is displayed via the display;
• and
• moving the vertical bar to a new vertical position such that the new vertical position corresponds to the vertical position in the scrollable content of the displayed new portion of the scrollable content;
• after determining that the scrollable content has been translated to an edge of the scrollable content, continuing to detect, via the one or more input devices, the user input corresponding to translating the scrollable content in the first direction;
• and
• in response to continuing to detect the user input corresponding to translating the scrollable content in the first direction, changing a length of the vertical bar.

A method, comprising:

• at an electronic device with a display and one or more input devices:
• displaying, via the display, a portion of scrollable content, wherein the displayed portion of the scrollable content has a vertical position in the scrollable content;
• displaying, via the display, a vertical bar concurrently with the displayed portion of the scrollable content, wherein the vertical bar has a vertical position that corresponds to the vertical position in the scrollable content of the displayed portion of the scrollable content;
• detecting, via the one or more input devices, a user input corresponding to translating the scrollable content in a first direction;
• in response to detecting the user input corresponding to translating the scrollable content in the first direction:
• translating the scrollable content in a direction corresponding to the first direction so that a new portion of the scrollable content is displayed via the display;
• and
• moving the vertical bar to a new vertical position such that the new vertical position corresponds to the vertical position in the scrollable content of the displayed new portion of the scrollable content;
• after determining that the scrollable content has been translated to an edge of the scrollable content, continuing to detect, via the one or more input devices, the user input corresponding to translating the scrollable content in the first direction;
• and
• in response to continuing to detect the user input corresponding to translating the scrollable content in the first direction, changing a length of the vertical bar.