Code Monkey home page Code Monkey logo

Comments (6)

idiotWu avatar idiotWu commented on May 30, 2024

I have taken a glance at source code and felt confused with thefirstPositive.top > 200 statement here. Thought it could work well without this statement as:

if (lastNegative) {
  el = lastNegative
} else if (firstPositive) {
  el = firstPositive
} else {
  el = els[els.length - 1]
}

And to avoid flickering in jump action, the offset here should be set to 0 too:

jump(`#${id}`, {
  duration: 300,
  a11y: true,
  offset: isMobile ? -60 : 0,
  callback
})

As for mobile devices? Ah, I think no one will scroll the main contents with sidebar opened XD, so the flickering is not as noticeable as desktops.

from docute.

egoist avatar egoist commented on May 30, 2024

felt confused with thefirstPositive.top > 200 statement

lastNegative
---window top line---
|
| --> n px
|
firstPositive
---window bottom line---

In such case, the active section might be lastNegative or firstPositive, the firstPositive is treated as active section only if its scrollTop is less than 200px

As for mobile devices? Ah, I think no one will scroll the main contents with sidebar opened

the 60px is preserved for the space of mobileHeader, when you click some heading in the sidebar toc, it should scroll to relevant heading in main content anyways.

from docute.

idiotWu avatar idiotWu commented on May 30, 2024

Yeah I knew the 60px for mobiles. But I think it's not necessary to preserve 200px for active section detection. As long as lastNegative exists, it ought to be the active section.

|- section-1: last negative
---window top---
|
|- seciton-2: first positive
|
---window bottom---

scroll =>

|- section-2: last negative
---window top---
|
|- seciton-3: first positive
|
---window bottom---

On this condition, firstPositive will only be treated as the active section when it across window top line (i.e. it turns into lastNegative).

from docute.

egoist avatar egoist commented on May 30, 2024

As long as lastNegative exists, it ought to be the active section.

um, what if the last section is very long and only several pixels left in viewport? 🤔 wouldn't the next section being treated as active section sound more reasonable?

btw, how can I reproduce the bug in your screenshot?

from docute.

idiotWu avatar idiotWu commented on May 30, 2024

But you see: when you click on a sidebar item, the page will scroll to the very beginning of target section - it somehow indicates that "a section is activated when it reaches the very top".

what if the last section is very long and only several pixels left in viewport

Well, for an opposite example, what if the last section is so short that it turns into inactive while there're still 90% of it are visible?

from docute.

idiotWu avatar idiotWu commented on May 30, 2024

Since it seems we will never reach a consensus on this issue, I'm going to close it 🙃

from docute.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.