Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Layout cookbook

developer.mozilla.org

Post reply on HN
Print view View original

21–27 of 27 posts

Re: CSS Layout cookbook

#21

Post by twhb »

maddyboo wrote: post #3

Wow, when did MDN start scrolljacking? I use a browser extension [1] which provides vim-like bindings for Chrome, and sites that scrolljack severely mess up the scroll up/down functionality. It's hard to tell there's scrolljacking just by using your mousewheel, but if you try running `window.scrollBy(0, 500);` in your developer console, you'll see the easing being applied. Try the same code on a site without scrollja…

MDN isn't scrolljacking, they just set “scroll-behavior: smooth;” [1]. It's a native CSS property and integrates with native scrolling, which is why mouse wheels, touchpads, touchscreens, etc are working fine. I would open a bug report with the extension, it needs to specify the scrolling mode it wants, rather than defaulting to whatever the website chose.

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-beha...

Re: CSS Layout cookbook

#22

Post by maddyboo »

regecks wrote: post #10
maddyboo wrote: post #5

Earlier quoted context omitted.

Glad I'm not the only one. Where in the MDN source is the scrolljacking code?

It seems to be caused entirely by `scroll-behavior: smooth;` on the `html` element. Try add that style to this (HN) comments page. Same problem. Seems like the vim addons aren't dealing with browsers' implementations of that style. Whoops. For the addon I use (Vimium-FF), it appears to have been already reported and fixed: https://github.com/philc/vimium/pull/3111 but not yet published to AMO.

Thanks for looking into this and finding that PR!

I opened an issue with SurfingKeys: https://github.com/brookhong/Surfingkeys/issues/837

Re: CSS Layout cookbook

#25

Post by dotancohen »

maddyboo wrote: post #3

Wow, when did MDN start scrolljacking? I use a browser extension [1] which provides vim-like bindings for Chrome, and sites that scrolljack severely mess up the scroll up/down functionality. It's hard to tell there's scrolljacking just by using your mousewheel, but if you try running `window.scrollBy(0, 500);` in your developer console, you'll see the easing being applied. Try the same code on a site without scrollja…

I just opened the site in Firefox using Tridactyl, and I can scroll normally with j k G gg.

Re: CSS Layout cookbook

#26

Post by schpaencoder »

irrational wrote: post #19
fouc wrote: post #14

They're all using flexbox except for the Media Objects one which is using CSS Grid. I would still use flexbox there.

Why? Because you don't like CSS Grid or because you don't feel it is widely supported enough yet?

Things with a single dimension fit Flexbox much better than grid
Post reply on HN