1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-12-18 18:36:07 +01:00

Fix jittery scroll bouncing

This commit is contained in:
squidfunk 2016-09-24 19:12:05 +02:00
parent fc7fb28edb
commit 02915210f4
3 changed files with 10 additions and 6 deletions

View File

@ -24,7 +24,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-a65065dc36.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-d7ccfc4ec2.css">
{% for path in extra_css %} {% for path in extra_css %}
<link rel="stylesheet" href="{{ path }}"> <link rel="stylesheet" href="{{ path }}">
{% endfor %} {% endfor %}

View File

@ -37,6 +37,10 @@ class Sidebar {
constructor(el) { constructor(el) {
this.el_ = (typeof el === 'string') ? document.querySelector(el) : el; this.el_ = (typeof el === 'string') ? document.querySelector(el) : el;
/* Grab inner and outer container */
this.inner_ = this.el_.parentNode;
this.outer_ = this.el_.parentNode.parentNode;
/* Initialize parameters */ /* Initialize parameters */
this.height_ = 0; this.height_ = 0;
this.locked_ = false; this.locked_ = false;
@ -53,8 +57,8 @@ class Sidebar {
* @param {Event} ev - Event * @param {Event} ev - Event
*/ */
update(ev) { update(ev) {
let container = this.el_.parentNode; let bounds = this.inner_.getBoundingClientRect();
let bounds = container.getBoundingClientRect(); let parent = this.outer_.offsetTop;
/* Determine top and bottom offsets */ /* Determine top and bottom offsets */
let top = bounds.top + window.pageYOffset, let top = bounds.top + window.pageYOffset,
@ -67,14 +71,14 @@ class Sidebar {
/* Calculate new bounds */ /* Calculate new bounds */
let offset = top - upper; let offset = top - upper;
let height = window.innerHeight - Math.max(lower - bottom, 0) let height = window.innerHeight - Math.max(lower - bottom, 0)
- Math.max(offset, container.parentNode.offsetTop); - Math.max(offset, parent);
/* If height changed, update element */ /* If height changed, update element */
if (height != this.height_) if (height != this.height_)
this.el_.style.height = (this.height_ = height) + 'px'; this.el_.style.height = (this.height_ = height) + 'px';
/* Sidebar should be locked, as we're below parent offset */ /* Sidebar should be locked, as we're below parent offset */
if (offset < container.parentNode.offsetTop) { if (offset < parent) {
if (!this.locked_) { if (!this.locked_) {
this.el_.classList.add('md-js__sidebar--locked'); this.el_.classList.add('md-js__sidebar--locked');
this.locked_ = true; this.locked_ = true;