vueuse icon indicating copy to clipboard operation
vueuse copied to clipboard

useElementVisibility options are not configureable

Open maxjayne98 opened this issue 2 years ago • 1 comments

Describe the bug

In this commit https://github.com/vueuse/vueuse/commit/429edda72fc283a7540c79afbea1a0a6299221ae the threshold option got hardcoded to 0, when you have a list of elements on the screen this change causes to trigger isVisible flag true while the element is not fully on the screen. when it used to be 0.1 we didn't have the problem(0.1 is the default threshold of useIntersectionObserver). I think the best way to fix it is to the default threshold if it's not defined on the options like the below. you just need to update your typescript interface as well. const { window = defaultWindow, scrollTarget, threshold = 0 } = options

Reproduction

https://stackblitz.com/edit/vitejs-vite-rptfks/?file=package.json

System Info

System:
    OS: macOS 14.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 816.78 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.11.0 - ~/.nvm/versions/node/v18.11.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.11.0/bin/npm
    pnpm: 7.33.6 - ~/Library/pnpm/pnpm
    Watchman: 2023.04.10.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 117.1.58.131
    Chrome: 118.0.5993.117
    Safari: 17.1
  npmPackages:
    @vueuse/components: 10.2.1 => 10.2.1 
    @vueuse/core: 10.2.1 => 10.4.1 
    @vueuse/head: ^1.1.26 => 1.3.1 
    vue: ^3.3.4 => 3.3.4

Used Package Manager

pnpm

Validations

  • [X] Follow our Code of Conduct
  • [X] Read the Contributing Guidelines.
  • [X] Read the docs.
  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
  • [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
  • [X] The provided reproduction is a minimal reproducible example of the bug.

maxjayne98 avatar Nov 02 '23 11:11 maxjayne98

Indeed this is an important feature. Not very useful otherwise. "Only fully visible" - this is oftenly used pattern when scrolling elements

matrunchyk avatar Dec 22 '23 14:12 matrunchyk