CSS Layout cookbook
developer.mozilla.org
CSS Layout cookbook
1–10 of 27 posts
Re: CSS Layout cookbook
#2Long overdue and very much welcomed. Thanks Mozilla.
Re: CSS Layout cookbook
#3Wow, 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 scrolljacking (like the HN front page) and you'll see it jumps directly to the destination.
You'd think one of the largest advocates for web standards and accessibility would know better!
Re: CSS Layout cookbook
#4Wow, 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…
Yeah, gross. jk gg G all stopped working.
Checking archive.org, it looks like the scrolljacking was just added on October 12.
Re: CSS Layout cookbook
#5Wow, 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…
Yeah, gross. jk gg G all stopped working. Checking archive.org, it looks like the scrolljacking was just added on October 12.
Glad I'm not the only one. Where in the MDN source is the scrolljacking code?
Re: CSS Layout cookbook
#6Wow, 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…
Pardon my ignorance on this. I am not sure if the easing of scroll motion is scrolljacking.
> Scrolljacking basically means we replace native scrolling (what you’re used to) with targeted scrolling: when the user initiates a scroll, either with their mouse or keyboard, scrolljacking takes them to an exact vertical point on the screen (for example, the top of the next content container)
They aren't targeting your scrolling to specific areas on the page, just adding an ease in/out. It happens natively on iOS actually.
Edit: I do agree that it might hinder accessibility, just dont think the term applies as it does in other cases here.
Re: CSS Layout cookbook
#7Wow, 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…
It also breaks the autoscroll chrome extension. :/
Re: CSS Layout cookbook
#8Wow, 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…
[deleted]
Re: CSS Layout cookbook
#9Wow, 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…
Yeah, gross. jk gg G all stopped working. Checking archive.org, it looks like the scrolljacking was just added on October 12.
This is really unfortunate. I use the MDN docs frequently, and I can no longer scroll using the typical vim motion commands via https://addons.mozilla.org/en-US/firefox/addon/vimium-ff/
I posted a thread on the MDN discord: https://discourse.mozilla.org/t/scrolling-behavior-on-mdn/32...
Edit: Another person pointed out that it's caused by the scroll-behavior: smooth; style. I'm guessing they won't change the MDN website and the extensions will need to ignore/disable the style through CSSOM.
The property docs say "User agents are allowed to ignore this property.", so I guess that makes sense.
Re: CSS Layout cookbook
#10Earlier quoted context omitted.
Yeah, gross. jk gg G all stopped working. Checking archive.org, it looks like the scrolljacking was just added on October 12.
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.