source

스크롤 스파이 드롭다운이 아무것도 감시하지 않을 때 기본 텍스트로 업데이트하는 방법이 있습니까?

gigabyte 2022. 8. 18. 23:46
반응형

스크롤 스파이 드롭다운이 아무것도 감시하지 않을 때 기본 텍스트로 업데이트하는 방법이 있습니까?

Vue는 처음이고 Bootstrap Vue Scrollspy(https://bootstrap-vue.org/docs/directives/scrollspy#example-using-navs)를 사용하고 있습니다.드롭다운은 스틱이며 참조되는 모든 콘텐츠를 감시하고 있습니다.스틱 드롭다운에는 현재 섹션으로 갱신되는 텍스트가 있습니다.

https://codesandbox.io/s/festive-tree-1w3hx?file=/src/App.vue와 같은 코드입니다.

위의 링크에서 "Contents"와 같이 드롭다운 텍스트를 기본 텍스트로 설정할 수 있는 방법이 있습니까?스크롤스피잉이 완료될 때마다 드롭다운 텍스트가 기본 텍스트로 변경된다는 건가요?이 접근 방식이 마음에 들지 않는 것은 높이 속성이 필요하기 때문입니다.#nav-scroller동적 데이터를 다루고 있기 때문에 이 옵션을 선택할 수 없습니다.더블 스크롤 바도 원하지 않습니다.

Stickybits(https://dollarshaveclub.github.io/stickybits/),)를 사용하여 코드의 드롭 다운을 스틱으로 하려고 했습니다.또한 위치가 스틱이 아닐 때 이벤트를 발생시킬 수 있는 기능이 있는지 확인하고 드롭다운 텍스트가 기본 텍스트로 변경되어 있는데, 제가 조사한 바로는 그렇지 않은 것 같습니다.

또한 오버플로를 숨겨봤지만 해결되지 않습니다.

저는 jQuery 없이 이것을 달성할 수 있는 방법을 찾고 있습니다.도와주시면 감사하겠습니다.

요건을 이해하는 데 시간이 좀 걸렸지만 섹션이 선택되지 않았을 때 커스텀 드롭다운 버튼 텍스트를 원하는 것 같습니다.제어하기 쉽도록 완전히 건조하게 만들었습니다.

  • 내가 배치한 것은emptySectionMessage및 adefaultDropdownTextdata
  • 작성했습니다.dropdownText반환되는 계산 속성sectionTitle스크롤 스파이에 타겟이 있는 경우defaultDropdownText그렇지않으면.

데이터 프로포트의 값을 원하는 대로 변경하십시오.

자세한 내용은 https://codesandbox.io/s/sweet-montalcini-bexqu?file=/src/App.vue를 참조하십시오.

언급URL : https://stackoverflow.com/questions/61543445/is-there-a-way-to-update-a-scrollspy-dropdowns-text-when-it-is-not-spying-on-an

반응형