mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-11-24 07:30:12 +01:00
Fixed sidebar jitter when scrolling footer into view
This commit is contained in:
parent
6d671bf246
commit
a9c782768e
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
material/assets/javascripts/bundle.7836ba4d.min.js
vendored
Normal file
2
material/assets/javascripts/bundle.7836ba4d.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
material/assets/javascripts/bundle.7836ba4d.min.js.map
Normal file
1
material/assets/javascripts/bundle.7836ba4d.min.js.map
Normal file
File diff suppressed because one or more lines are too long
@ -1,12 +1,12 @@
|
||||
{
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.00f9b4e0.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.00f9b4e0.min.js.map",
|
||||
"assets/javascripts/bundle.js": "assets/javascripts/bundle.7836ba4d.min.js",
|
||||
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7836ba4d.min.js.map",
|
||||
"assets/javascripts/vendor.js": "assets/javascripts/vendor.fd16492e.min.js",
|
||||
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.fd16492e.min.js.map",
|
||||
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.4ac00218.min.js",
|
||||
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.4ac00218.min.js.map",
|
||||
"assets/stylesheets/main.css": "assets/stylesheets/main.e87fb0f5.min.css",
|
||||
"assets/stylesheets/main.css.map": "assets/stylesheets/main.e87fb0f5.min.css.map",
|
||||
"assets/stylesheets/main.css": "assets/stylesheets/main.358818c7.min.css",
|
||||
"assets/stylesheets/main.css.map": "assets/stylesheets/main.358818c7.min.css.map",
|
||||
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.88a3f51b.min.css",
|
||||
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.88a3f51b.min.css.map",
|
||||
"assets/stylesheets/palette.css": "assets/stylesheets/palette.f0267088.min.css",
|
||||
|
3
material/assets/stylesheets/main.358818c7.min.css
vendored
Normal file
3
material/assets/stylesheets/main.358818c7.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/main.358818c7.min.css.map
Normal file
1
material/assets/stylesheets/main.358818c7.min.css.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -39,7 +39,7 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.e87fb0f5.min.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.358818c7.min.css' | url }}">
|
||||
{% if config.theme.palette %}
|
||||
{% set palette = config.theme.palette %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.f0267088.min.css' | url }}">
|
||||
@ -178,7 +178,7 @@
|
||||
</div>
|
||||
{% block scripts %}
|
||||
<script src="{{ 'assets/javascripts/vendor.fd16492e.min.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/bundle.00f9b4e0.min.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/bundle.7836ba4d.min.js' | url }}"></script>
|
||||
{%- set translations = {} -%}
|
||||
{%- for key in [
|
||||
"clipboard.copy",
|
||||
|
@ -52,13 +52,29 @@ export function resetSidebarOffset(
|
||||
/**
|
||||
* Set sidebar height
|
||||
*
|
||||
* This function doesn't set the height of the actual sidebar, but of its first
|
||||
* child – the `.md-sidebar__scrollwrap` element in order to mitigiate jittery
|
||||
* sidebars when the footer is scrolled into view. At some point we switched
|
||||
* from `absolute` / `fixed` positioning to `sticky` positioning, which greatly
|
||||
* reduced jitter in some browsers (respectively Firefox and Safari) when
|
||||
* scrolling from the top. However, top-aligned sticky positioning means that
|
||||
* the sidebar snaps to the bottom when the end of the container is reached.
|
||||
* This is what leads to the mentioned jitter, as the sidebar's height may be
|
||||
* updated to slowly.
|
||||
*
|
||||
* By setting the height of the sidebar to zero (while preserving `padding`),
|
||||
* and the height on its first element, this behaviour can be mitigiated. We
|
||||
* must assume that the top- and bottom offset (`padding`) are equal, as the
|
||||
* `offsetBottom` value is `undefined`.
|
||||
*
|
||||
* @param el - Sidebar element
|
||||
* @param value - Sidebar height
|
||||
*/
|
||||
export function setSidebarHeight(
|
||||
el: HTMLElement, value: number
|
||||
): void {
|
||||
el.style.height = `${value}px`
|
||||
const scrollwrap = el.firstElementChild as HTMLElement
|
||||
scrollwrap.style.height = `${value - 2 * scrollwrap.offsetTop}px`
|
||||
}
|
||||
|
||||
/**
|
||||
@ -69,5 +85,6 @@ export function setSidebarHeight(
|
||||
export function resetSidebarHeight(
|
||||
el: HTMLElement
|
||||
): void {
|
||||
el.style.height = ""
|
||||
const scrollwrap = el.firstElementChild as HTMLElement
|
||||
scrollwrap.style.height = ""
|
||||
}
|
||||
|
@ -158,7 +158,6 @@
|
||||
|
||||
// [tablet -]: Layered navigation
|
||||
@include break-to-device(tablet) {
|
||||
background-color: var(--md-default-bg-color);
|
||||
|
||||
// Stretch primary navigation to drawer
|
||||
&--primary,
|
||||
@ -171,6 +170,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: var(--md-default-bg-color);
|
||||
}
|
||||
|
||||
// Adjust styles for primary navigation
|
||||
@ -412,6 +412,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust styles for secondary navigation
|
||||
&--secondary {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Hide nested navigation by default
|
||||
.md-nav__toggle ~ & {
|
||||
display: flex;
|
||||
|
@ -53,8 +53,8 @@ $md-toggle__drawer--checked:
|
||||
top: px2rem(48px);
|
||||
align-self: flex-start;
|
||||
width: px2rem(242px);
|
||||
height: 0;
|
||||
padding: px2rem(24px) 0;
|
||||
overflow: hidden;
|
||||
|
||||
// Hide for print
|
||||
@media print {
|
||||
@ -103,6 +103,16 @@ $md-toggle__drawer--checked:
|
||||
}
|
||||
}
|
||||
|
||||
// [screen +]: Convert navigation to sidebar
|
||||
@include break-from-device(screen) {
|
||||
height: 0;
|
||||
|
||||
// Normal sticky behavior, if JavaScript is not available.
|
||||
.no-js & {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Secondary sidebar with table of contents
|
||||
&--secondary {
|
||||
display: none;
|
||||
@ -111,6 +121,12 @@ $md-toggle__drawer--checked:
|
||||
// [tablet landscape +]: Show table of contents next to body copy
|
||||
@include break-from-device(tablet landscape) {
|
||||
display: block;
|
||||
height: 0;
|
||||
|
||||
// Normal sticky behavior, if JavaScript is not available.
|
||||
.no-js & {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Ensure smooth scrolling on iOS
|
||||
.md-sidebar__scrollwrap {
|
||||
@ -121,7 +137,6 @@ $md-toggle__drawer--checked:
|
||||
|
||||
// Wrapper for scrolling on overflow
|
||||
&__scrollwrap {
|
||||
max-height: 100%;
|
||||
margin: 0 px2rem(4px);
|
||||
overflow-y: auto;
|
||||
// Hack: reduce jitter
|
||||
@ -135,7 +150,7 @@ $md-toggle__drawer--checked:
|
||||
// this reason, we use an animation to set scroll snaping with a slight
|
||||
// delay, which seems to fix the issue (#1667).
|
||||
.js & {
|
||||
animation: md-sidebar__scrollwrap--hack 400ms forwards;
|
||||
animation: md-sidebar__scrollwrap--hack 1000ms forwards;
|
||||
}
|
||||
|
||||
// [tablet -]: Adjust margins
|
||||
|
Loading…
Reference in New Issue
Block a user