lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep scroll navigation buttons visible when content can scroll

Browse Source 
Changed scroll buttons behavior:
- Always visible at 70% opacity when there's more content to scroll
- Increase to 100% opacity on hover
- Removed group-hover requirement
- Only show when canScrollLeft/canScrollRight is true

Users now have a clear indicator when more content is available
without needing to hover over the content row.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-03 00:43:18 +00:00
parent e854f67851
commit 8260908024
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ContentRow.vue
View File

@@ -9,7 +9,7 @@
<button <button
v-if="canScrollLeft" v-if="canScrollLeft"
@click="scrollLeft" @click="scrollLeft"
class="hidden md:block absolute left-0 top-0 bottom-0 z-10 w-12 bg-black/50 hover:bg-black/70 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity" class="scroll-nav-button hidden md:block absolute left-0 top-0 bottom-0 z-10 w-12 bg-black/50 hover:bg-black/70 backdrop-blur-sm opacity-70 hover:opacity-100 transition-opacity"
> >
<svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 24 24"> <svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/> <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
@@ -47,7 +47,7 @@
<button <button
v-if="canScrollRight" v-if="canScrollRight"
@click="scrollRight" @click="scrollRight"
class="hidden md:block absolute right-0 top-0 bottom-0 z-10 w-12 bg-black/50 hover:bg-black/70 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity" class="scroll-nav-button hidden md:block absolute right-0 top-0 bottom-0 z-10 w-12 bg-black/50 hover:bg-black/70 backdrop-blur-sm opacity-70 hover:opacity-100 transition-opacity"
> >
<svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 24 24"> <svg class="w-8 h-8 mx-auto" fill="currentColor" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>