Scroll-behavior on CSS

hrqmonteiro · 2020-09-21T23:25:04.256Z

Hi, i was messing with my CSS files, and i'm trying to add the scroll-behavior feature, specifically for it to work on the TOC, but adding

body {
scroll-behavior: smooth;
}

or

html {
scroll-behavior: smooth;
}

Doesn't work. So Joplin is not compatible with it, or something like that, or am i doing something wrong? has anybody tried it?

dpoulton · 2020-09-23T22:26:27.525Z

hrqmonteiro:

has anybody tried it?

Not a helpful post apart from to let you know:

Someone has read your post, and,
Become intrigued by this idea, and,
Tried to get this to work (for far too long), and,
Failed miserably.

I have no idea if Joplin can actually support this.

uxamanda · 2020-09-24T05:22:46.707Z

I also gave it a try, and couldn't get it to work. I imagine it has something to do with CodeMirror (the text editor) keeping the markdown and html aligned.

I proved that the rendered html can have smooth, but only if you include the HTML and CSS in the note itself. Not really useful.

Paste this into a sample note in Joplin to see what I mean:

Sample Note Code

# testing smooth scrolling, it works! (but only if you embed the html, so not actually useful)

<html>

<style>body {
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

nav {
  background-color: #000;
  display: block;
  padding: 1em 0;
  text-align: center;
  width: 200px;
}

nav a {
  color: #fff;
  margin: 0 1em;
  text-decoration: none;
}

.scrolling-box {
  background-color: #eaeaea;
  display: block;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  text-align: center;
  width: 200px;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
	}</style>
<nav>
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
</nav>

<div class="scrolling-box">
  <section id="1">This is the first section</section>
  <section id="2">This is the second section</section>
  <section id="3">This is the third section</section>
</div>
</nav>

(the demo code is from here https://codepen.io/team/css-tricks/pen/xdGKoJ)