# Vertical Mobile Scroll Bar Post / Date Text

**URL:** https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823
**Category:** UX
**Created:** [October 21, 2016, 12:31am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823 "2016-10-21T00:31:52Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![JamesNorth](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesnorth/32/283740_2.png) [@JamesNorth](https://meta.discourse.org/u/JamesNorth)
#### Post date: [October 24, 2016, 12:35pm UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/23 "2016-10-24T12:35:10Z")

</div>

Pretty much all topics on a board I admin are over 5k, so there’s no way to apply a blanket generalisation. In addition, there are lots of different mobile screen sizes, so the minimum movement varies.

Some people have reasons for finding specific posts depending on what that forum’s purpose is - I can’t imagine it, but it was an established function already in Discourse.

Clicking in a space or on specific text is a smart idea I think, the initial overlay just needs to be smaller (as above - skinny/horizontal) though so that during scrolling enough content is visible.

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [October 24, 2016, 12:35pm UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/24 "2016-10-24T12:35:51Z")

</div>

Why not draw a full width horizontal bar which is used for scrolling? Indeed the current implementation here at Meta has certain design issues:

- It is not obvious that the thing is scrollable/slideable
- Aligned too much to the left. Becomes more of an issue with 5,5"+ displays and/or smaller hands.
- Nothing suggest that you can slide it from the counter/date element.
- I am also somewhat concerned how this works with threads that have thousands of posts.

---

<div class="post-metadata">

### Author: ![JamesNorth](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesnorth/32/283740_2.png) [@JamesNorth](https://meta.discourse.org/u/JamesNorth)
#### Post date: [October 24, 2016, 12:55pm UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/25 "2016-10-24T12:55:21Z")

</div>

I think the small-height horizontal solution that @erlend_sh offered above is great.

Some kind of specific post finder/number enter could be triggered by a click above the post number or something like that.

[![](https://global.discourse-cdn.com/meta/original/3X/3/d/3de25a8d7276d632a5ce673290be33b96369f20a.jpg) ](https://global.discourse-cdn.com/meta/original/3X/3/d/3de25a8d7276d632a5ce673290be33b96369f20a.jpg)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [October 31, 2016, 5:02am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/27 "2016-10-31T05:02:22Z")

</div>

Can we try latest on meta? How does it feel?

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [October 31, 2016, 5:42am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/28 "2016-10-31T05:42:04Z")

</div>

Looks good! I do quite like it on the right side much more. Also really liking the larger slider. Jump to post handles as well as I could expect. 🙂

Some polishing ideas to replace the popup input -

- Auto-focus input on tap. It needs an extra tap on the input to bring up the keyboard for me, under Chrome on Android 6p.
- Have an input-type=tel, (or number) for an input field for supported phone keyboards. Saves a keyboard mode change.

---

<div class="post-metadata">

### Author: ![JamesNorth](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesnorth/32/283740_2.png) [@JamesNorth](https://meta.discourse.org/u/JamesNorth)
#### Post date: [October 31, 2016, 6:07am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/29 "2016-10-31T06:07:05Z")

</div>

Looks really great @sam.

It incorporates both jumping and sliding really well.

I think the slider works great for a right hander (which I am), but it seems as though that ‘touchable area’ to the left of the text has gone (previously to the right of text) for a left hander to scroll and still see post number?

---

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [October 31, 2016, 7:40am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/30 "2016-10-31T07:40:35Z")

</div>

This one is much better than the previous implementation.

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [October 31, 2016, 5:13pm UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/31 "2016-10-31T17:13:03Z")

</div>

Still in transit so can’t make a video, but it totally freezes up my entire iPad safari browser if I click on the timeline, as if to skip ahead to an arbitrary position. Not saying I want that to be a feature (it should do nothing) but right now it appears a misclick in this spot causes havoc.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 4, 2016, 5:22am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/33 "2016-11-04T05:22:23Z")

</div>

> [@erlend\_sh](#):
>
> but it totally freezes up my entire iPad safari browser if I click on the timeline

@sam could not repro this on iPad in portrait or landscape. Can you repro it? What are the exact steps and orientation, iOS version?

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [November 5, 2016, 11:11pm UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/34 "2016-11-05T23:11:24Z")

</div>

This doesn’t happen on my iPhone.

The problem occurrs only on my iPad:

- iPad Air 2
- iOS v10.1.1.
- Both Safari and Google Chrome

I’ve tried rebooting, quitting Safari as well a “Clear History and Website Data”. It still happens every single time I click _directly on the timeline_, i.e. roughly this space:

 ![](https://global.discourse-cdn.com/meta/original/3X/0/2/0208b3f2b7c3003126e7de374fac63787b43db53.jpg)

Seems to be some kind of weird thing specific to a certain device. In any case, I still don’t think this should be a clickable area.

> [@erlend\_sh](#):
>
> - It’s very easy to misclick this space and get disoriented (thankfully we have our custom Back button)
> - It’s a fairly pointless click target otherwise, because there’s no way you’re gonna know which post you’re actually jumping to by clicking some empty space.

---

<div class="post-metadata">

### Author: ![JamesNorth](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesnorth/32/283740_2.png) [@JamesNorth](https://meta.discourse.org/u/JamesNorth)
#### Post date: [November 5, 2016, 11:30pm UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/35 "2016-11-05T23:30:47Z")

</div>

Shouldn’t most recent version appear on right of screen?

 ![](https://global.discourse-cdn.com/meta/original/3X/4/1/41cc77b4871a2ce51ed2af6b583ae3d216d9747f.PNG)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 6, 2016, 12:18am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/36 "2016-11-06T00:18:26Z")

</div>

All right does this let you repro @sam?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 22, 2016, 4:36am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/37 "2016-11-22T04:36:14Z")

</div>

Still unable to repro this issue ☹

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 23, 2016, 7:20am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/38 "2016-11-23T07:20:21Z")

</div>

There has been a fair bit of pushback on this feature… but I wanted to make it clear this has been my plan all along.

Will take me a bit more to stabalize this change but it is awesome for large topics.

https://www.youtube.com/embed/j0cSfCbePno?feature=oembed&wmode=opaque

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 25, 2016, 9:47am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/39 "2016-11-25T09:47:49Z")

</div>

Ok my change is now on latest, try it out and let me know how it feels

 ![](https://global.discourse-cdn.com/meta/original/3X/8/8/882d2245dadb4cbb5337c04b3df53503001263cf.PNG)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 25, 2016, 10:05am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/40 "2016-11-25T10:05:03Z")

</div>

How does this not result in a bunch of extra data requests for post content on mobile?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 25, 2016, 10:07am UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/41 "2016-11-25T10:07:23Z")

</div>

It is on demand and batched only requested when it is opened

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 25, 2016, 6:18pm UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/42 "2016-11-25T18:18:44Z")

</div>

How many additional mobile requests is this generating, though? Seems weird to have this kind of real time content pull on mobile where bandwidth / requests are expensive. What is the behavior when the network is bad or slow?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [November 25, 2016, 10:59pm UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/43 "2016-11-25T22:59:16Z")

</div>

For this page 2 requests totalling approx 7k. If network is bad or slow there is no real downside it is simply not displayed, we never make parallel requests for excerpts.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [February 26, 2017, 12:32pm UTC](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823/45 "2017-02-26T12:32:39Z")

</div>



[Previous page](https://meta.discourse.org/t/vertical-mobile-scroll-bar-post-date-text/51823.md?page=1)
