6 ms·

I don't keep a "dick bar" that sticks to the top of the page to remind you which site you're on. Your browser is already doing that for you. A variation of thi

by wruza 2y ago

I don't keep a "dick bar" that sticks to the top of the page to remind you which site you're on. Your browser is already doing that for you. A variation of this is my worst offender, the flapping bar. Not only it takes space, it flaps every time I adjust my overscroll by pulling back, and it covers the text I was trying to adjust. The hysteresis to hide it back is usually too big and that makes you potentially overscroll again. Special place in hell for those who hide the flap on scroll-up but show it again when the scroll inertia ends, without even pulling back. Can’t say here what I think about people who do the above, but you can imagine.

hombre_fatal 2y ago
Funnily enough for years I would say the general consensus on HN was that it was a thoughtful alternative to having to scroll back to the top, esp back when it was a relatively new gimmick on mobile. I remember arguing about it on HN back when I was in uni.
- dredmorbius 2y ago
  Most mobile browsers lack a "home" key equivalent (or bury it in a not-always-visible on-screen soft-keyboard). That's among the very few arguments in favour of a "Top" navigation affordance. I still hate such things, especially when using a desktop browser.
  - oneeyedpigeon 2y ago
    I think some, if not most, mobile browsers - even apps - used to implement it via a space near the top of the window/screen. That seems to have gone away, though.
    - dredmorbius 2y ago
      Worse: "pull to refresh" means that often when you try to scroll to the top of a page ... it reloads instead. The number of times this has happened whilst I've been editing a post on some rando site, losing my content ...
      - snackbroken 2y ago
        In Firefox you can disable this behavior under Settings -> Customize -> Gestures. If your browser does not have an equivalent setting, get a better browser.
        dredmorbius 2y ago
        My main driver is EinkBro (on an e-ink tablet), which similarly doesn't seem to be brain-damaged in this regard. <https://github.com/plateaukao/einkbro https://github.com/plateaukao/einkbro> I do have Firefox (Fennic Fox F-Droid) installed on that tablet. The reading experience is so vastly inferior despite numerous capabilities of Firefox (most especially browser extensions) that it's not even funny. Mostly because scrolling on e-ink is a disaster.[1] Chrome/Chromium of course is an absolute disaster. EinkBro has incorporated ad-blocking, JS toggle, and cookie rejection, which meet most of my basic extension needs. The fact that it offers a paginated navigation (touch regions to scroll by a full screen) works far better with e-ink display characteristics. I'll note that on desktop I also usually scroll by screen, though that's usually by tapping the spacebar. -------------------------------- Notes: 1. The thought does occur that Firefox/Android might benefit by an extension (or set of same) which address e-ink display characteristics. Off the top of my head those would be: - Paginated navigation. The ability to readily scroll by a full page, rather than touch-and-drag scrolling. - High-contrast / greyscale optimisation. Tweaking page colours such that reading on e-ink is optimised. Generally that would be pure black/white for foreground/background, and a limited greyscale pallette for other elements. Halftone dithering of photographic images would also be generally preferable. - An ability to absolutely freeze any animations and/or video unless specifically selected. - Perhaps: an ability to automatically render pages in reader mode, with the above settings enabled. - Other odds'n'sods, such as rejecting any autoplay (video, audio), though existing Firefox extensions probably address that. I suspect that much of that is reasonably doable. There is an "E-ink Viewable" extension which seems to detect and correct for dark-mode themes (exceedingly unreadable on tablets, somewhat ironically), though it omits other capabilities: <https://addons.mozilla.org/en-US/firefox/addon/e-ink-viewable/ https://addons.mozilla.org/en-US/firefox/addon/e-ink-viewabl...>. "Edge Touch Pager" addresses navigation: <https://addons.mozilla.org/en-US/firefox/addon/edge-touch-pager/ https://addons.mozilla.org/en-US/firefox/addon/edge-touch-pa...>. And there's a Reddit submission for improving e-ink experiences w/ Firefox generally, which touches on most of the items I'd mentioned above: <https://old.reddit.com/r/eink/comments/lkc0ea/tip_to_make_web_browsing_much_better_on_eink/ https://old.reddit.com/r/eink/comments/lkc0ea/tip_to_make_we...>. Future me may find this useful....
    - wruza 2y ago
      It works since forever on ios in most (native) apps, including the browser. Tap on the "clock" to scroll up - that is the home button. In safari you might need to tap again, if the header was collapsed.
    - cr125rider 2y ago
      Double tap the top bar and almost all scrolling panels on iOS will whoosh to the top
      - oneeyedpigeon 2y ago
        This is definitely an Android failing, in that case.
  - layer8 2y ago
    On iOS, tapping on the top ”status” area will bring you to the top under any browser. It’s an iOS-wide functionality on any vertically scrolling view. I sometimes miss that on Android, but on the other hand the scroll acceleration is so much faster on Android that you can always scroll to the top quickly.
- wruza 2y ago
  It can actually be done correctly, like e.g. safari does it in the top-urlbar mode. - When a user scrolls content-up in any way, the header collapses immediately (or you may just hide it). - When a user scrolls content-down by pulling, without "a kick", then it stays collapsed. - When a user "kick"-scrolls content-down, i.e. scrolls carelessly, in a way that a when finger lifts, scroll still has inertia -- then it gets shown again. Maybe with a short activation distance or inertia level to prevent ghost kicks. As a result, adjusting text by pulling (including repeatedly) won't flap anything, and if a user kick-scrolls, then they can access the header, if it has any function to it. It sort of separates content-down scroll into two different gestures, which you just learn and use appropriately. But instead most sites implement the most clinical behavior as described in the comment above. If a site does that, it should be immediately revoked a dns record and its owner put on probation, at the legislative level.
  - cwillu 2y ago
    NAK, if I want to see the header, I know where to find it.
  - Wowfunhappy 2y ago
    Is it actually possible to implement this as a website? Can websites tell if you're scrolling by pulling vs flicking?
chuckadams 2y ago
The ACM's site has a bar like that, though it's thin enough that the issue is with the animations rather than the size: it expands then immediately collapses after even a pixel's worth of scrolling, so it's basically impossible to get at with the "hide distracting elements" picker.
layer8 2y ago
Another common problem with overlayed top bars is that when following fragment links within a page, the browser scrolls the page such that the target anchor is at the top of the window, which then means it’s hidden by the top bar. For example, when jumping to a subsection, the subsection title (and the first lines of the following paragraph text) will often be obscured by the top bar.
- morder 2y ago
  You can somewhat solve this by using some css to specify the offset from the top the anchor should be. `scroll-margin-top`
  - gavinsyancey 2y ago
    Yes, but many sites don't.
drweevil 2y ago
Now you mention it, I hate hate hate scroll inertia.
Kiro 2y ago
Any examples? Searching for "flapping bar" didn't yield anything.
- wruza 2y ago
  Late update: https://www.quantamagazine.org/how-many-numbers-exist-infinity-proof-moves-math-closer-to-an-answer-20210715/ https://www.quantamagazine.org/how-many-numbers-exist-infini... The bar collapses and then pops up back on ios if you scroll content-up in a non-inertial way.
- Mordisquitos 2y ago
  The articles on medium.com are common culprits.
  - Kiro 2y ago
    Hm, is that really the same thing? It's not doing the "it flaps every time I adjust my overscroll by pulling back, and it covers the text I was trying to adjust".
    - Mordisquitos 2y ago
      It may not be such an egregious example as what GP comment was referring to, but it was the first thing that came to my mind. Maybe the Medium UI has improved somewhat since I was last annoyed by this.
- wruza 2y ago
  I can’t remember sadly. But most articles I’ve read in the last few years were from /news or /newest.
ormax3 2y ago
I use this handy bookmarklet to kill sticky headers:: https://github.com/t-mart/kill-sticky https://github.com/t-mart/kill-sticky
limaoscarjuliet 2y ago
The bar screws up printing usually.
theandrewbailey 2y ago
I've yet to encounter a "dick bar" that doesn't jerk the page around when it collapses. Not smooth at all. I'm surprised that it hasn't been solved in 10 years.
- marssaxman 2y ago
  uBlock Origin element zapper provides an effective solution in my experience.

by wruza 2y ago

hombre_fatal 2y ago

Funnily enough for years I would say the general consensus on HN was that it was a thoughtful alternative to having to scroll back to the top, esp back when it was a relatively new gimmick on mobile. I remember arguing about it on HN back when I was in uni.

dredmorbius 2y ago
Most mobile browsers lack a "home" key equivalent (or bury it in a not-always-visible on-screen soft-keyboard). That's among the very few arguments in favour of a "Top" navigation affordance. I still hate such things, especially when using a desktop browser.
- oneeyedpigeon 2y ago
  I think some, if not most, mobile browsers - even apps - used to implement it via a space near the top of the window/screen. That seems to have gone away, though.
  - dredmorbius 2y ago
    Worse: "pull to refresh" means that often when you try to scroll to the top of a page ... it reloads instead. The number of times this has happened whilst I've been editing a post on some rando site, losing my content ...
    - snackbroken 2y ago
      In Firefox you can disable this behavior under Settings -> Customize -> Gestures. If your browser does not have an equivalent setting, get a better browser.
      - dredmorbius 2y ago
        My main driver is EinkBro (on an e-ink tablet), which similarly doesn't seem to be brain-damaged in this regard. <https://github.com/plateaukao/einkbro https://github.com/plateaukao/einkbro> I do have Firefox (Fennic Fox F-Droid) installed on that tablet. The reading experience is so vastly inferior despite numerous capabilities of Firefox (most especially browser extensions) that it's not even funny. Mostly because scrolling on e-ink is a disaster.[1] Chrome/Chromium of course is an absolute disaster. EinkBro has incorporated ad-blocking, JS toggle, and cookie rejection, which meet most of my basic extension needs. The fact that it offers a paginated navigation (touch regions to scroll by a full screen) works far better with e-ink display characteristics. I'll note that on desktop I also usually scroll by screen, though that's usually by tapping the spacebar. -------------------------------- Notes: 1. The thought does occur that Firefox/Android might benefit by an extension (or set of same) which address e-ink display characteristics. Off the top of my head those would be: - Paginated navigation. The ability to readily scroll by a full page, rather than touch-and-drag scrolling. - High-contrast / greyscale optimisation. Tweaking page colours such that reading on e-ink is optimised. Generally that would be pure black/white for foreground/background, and a limited greyscale pallette for other elements. Halftone dithering of photographic images would also be generally preferable. - An ability to absolutely freeze any animations and/or video unless specifically selected. - Perhaps: an ability to automatically render pages in reader mode, with the above settings enabled. - Other odds'n'sods, such as rejecting any autoplay (video, audio), though existing Firefox extensions probably address that. I suspect that much of that is reasonably doable. There is an "E-ink Viewable" extension which seems to detect and correct for dark-mode themes (exceedingly unreadable on tablets, somewhat ironically), though it omits other capabilities: <https://addons.mozilla.org/en-US/firefox/addon/e-ink-viewable/ https://addons.mozilla.org/en-US/firefox/addon/e-ink-viewabl...>. "Edge Touch Pager" addresses navigation: <https://addons.mozilla.org/en-US/firefox/addon/edge-touch-pager/ https://addons.mozilla.org/en-US/firefox/addon/edge-touch-pa...>. And there's a Reddit submission for improving e-ink experiences w/ Firefox generally, which touches on most of the items I'd mentioned above: <https://old.reddit.com/r/eink/comments/lkc0ea/tip_to_make_web_browsing_much_better_on_eink/ https://old.reddit.com/r/eink/comments/lkc0ea/tip_to_make_we...>. Future me may find this useful....
  - wruza 2y ago
    It works since forever on ios in most (native) apps, including the browser. Tap on the "clock" to scroll up - that is the home button. In safari you might need to tap again, if the header was collapsed.
  - cr125rider 2y ago
    Double tap the top bar and almost all scrolling panels on iOS will whoosh to the top
    - oneeyedpigeon 2y ago
      This is definitely an Android failing, in that case.
- layer8 2y ago
  On iOS, tapping on the top ”status” area will bring you to the top under any browser. It’s an iOS-wide functionality on any vertically scrolling view. I sometimes miss that on Android, but on the other hand the scroll acceleration is so much faster on Android that you can always scroll to the top quickly.
wruza 2y ago
It can actually be done correctly, like e.g. safari does it in the top-urlbar mode. - When a user scrolls content-up in any way, the header collapses immediately (or you may just hide it). - When a user scrolls content-down by pulling, without "a kick", then it stays collapsed. - When a user "kick"-scrolls content-down, i.e. scrolls carelessly, in a way that a when finger lifts, scroll still has inertia -- then it gets shown again. Maybe with a short activation distance or inertia level to prevent ghost kicks. As a result, adjusting text by pulling (including repeatedly) won't flap anything, and if a user kick-scrolls, then they can access the header, if it has any function to it. It sort of separates content-down scroll into two different gestures, which you just learn and use appropriately. But instead most sites implement the most clinical behavior as described in the comment above. If a site does that, it should be immediately revoked a dns record and its owner put on probation, at the legislative level.
- cwillu 2y ago
  NAK, if I want to see the header, I know where to find it.
- Wowfunhappy 2y ago
  Is it actually possible to implement this as a website? Can websites tell if you're scrolling by pulling vs flicking?

chuckadams 2y ago

The ACM's site has a bar like that, though it's thin enough that the issue is with the animations rather than the size: it expands then immediately collapses after even a pixel's worth of scrolling, so it's basically impossible to get at with the "hide distracting elements" picker.

layer8 2y ago

Another common problem with overlayed top bars is that when following fragment links within a page, the browser scrolls the page such that the target anchor is at the top of the window, which then means it’s hidden by the top bar. For example, when jumping to a subsection, the subsection title (and the first lines of the following paragraph text) will often be obscured by the top bar.

morder 2y ago
You can somewhat solve this by using some css to specify the offset from the top the anchor should be. `scroll-margin-top`
- gavinsyancey 2y ago
  Yes, but many sites don't.

drweevil 2y ago

Now you mention it, I hate hate hate scroll inertia.

Kiro 2y ago

Any examples? Searching for "flapping bar" didn't yield anything.

wruza 2y ago
Late update: https://www.quantamagazine.org/how-many-numbers-exist-infinity-proof-moves-math-closer-to-an-answer-20210715/ https://www.quantamagazine.org/how-many-numbers-exist-infini... The bar collapses and then pops up back on ios if you scroll content-up in a non-inertial way.
Mordisquitos 2y ago
The articles on medium.com are common culprits.
- Kiro 2y ago
  Hm, is that really the same thing? It's not doing the "it flaps every time I adjust my overscroll by pulling back, and it covers the text I was trying to adjust".
  - Mordisquitos 2y ago
    It may not be such an egregious example as what GP comment was referring to, but it was the first thing that came to my mind. Maybe the Medium UI has improved somewhat since I was last annoyed by this.
wruza 2y ago
I can’t remember sadly. But most articles I’ve read in the last few years were from /news or /newest.

ormax3 2y ago

I use this handy bookmarklet to kill sticky headers:: https://github.com/t-mart/kill-sticky https://github.com/t-mart/kill-sticky

limaoscarjuliet 2y ago

The bar screws up printing usually.

theandrewbailey 2y ago

I've yet to encounter a "dick bar" that doesn't jerk the page around when it collapses. Not smooth at all. I'm surprised that it hasn't been solved in 10 years.

marssaxman 2y ago
uBlock Origin element zapper provides an effective solution in my experience.