Как в Blazor добавить/удалить класс в элементе div в зависимости от его положения прокрутки? Если элемент div был прокручен более чем на 50 единиц, добавьте к нему класс. Если нет, то удалите класс из div. Я прочитал компоненты MS blazor и, похоже, не нашел ничего, что могло бы сделать это.
Намерение состоит в том, чтобы скрыть/показать баннер над строкой меню на основе прокрутки страницы. Как только страница прокручивается вниз, баннер удаляется, а строка меню перемещается в верхнюю часть страницы. Идея состоит в том, чтобы сохранить как можно больше места для просмотра по вертикали при прокрутке страницы. (См. обновление ниже.)
Я также просмотрел несколько сообщений, которые отслеживают прокрутку и вызывают js, но мне нужна помощь в создании функции (в blazor), которая добавляет/удаляет имя класса на основе если позиция прокрутки больше или меньше 50 единиц.
Ссылка на публикацию для прокрутки:
Как подписаться на событие onscroll в Blazor?
Площадка Blazor для прокрутка: https://blazorrepl.telerik.com/GyPvmUbS13bnRDti38 --UPDATE--
Пока этот пост принят ответ на добавление класса, я также обнаружил, что с помощью CSS-анимации, управляемой прокруткой, можно достичь очень похожего результата без использования каких-либо скриптов. Вы не можете использовать позицию прокрутки в CSS, но вы можете анимировать практически что угодно, основываясь на прокрутке окна от 0 до 100%... https://tympanus.net/codrops/2024/01/17/a-practical- введение в анимацию-управляемую прокруткой с помощью CSS-прокрутки и просмотра/
window.getScrollTop = (selector) => {
return document.querySelector(".div").scrollTop
}
DIV scrollTop: @ScrollTop
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
@code {
[Inject] IJSRuntime JS {get;set;}
public int ScrollTop { get; set; }
private async Task OnScroll(EventArgs e)
{
ScrollTop = await JS.InvokeAsync("getScrollTop", ".div");
}
}
Я попробовал вызвать функцию для добавления/удаления класса в зависимости от положения прокрутки, но это не сработало. Ниже приведена статическая демонстрация того, чего я пытаюсь достичь.
Top Bar
[url=#]Menu Bar[/url]
Test Title
Some information about the tests results.
Type a test word
Find a specific test
Search for tests
Find more tests
Как в Blazor добавить/удалить класс в элементе div в зависимости от его положения прокрутки? Если элемент div был прокручен более чем на 50 единиц, добавьте к нему класс. Если нет, то удалите класс из div. Я прочитал компоненты MS blazor и, похоже, не нашел ничего, что могло бы сделать это. Намерение состоит в том, чтобы скрыть/показать баннер над строкой меню на основе прокрутки страницы. Как только страница прокручивается вниз, баннер удаляется, а строка меню перемещается в верхнюю часть страницы. Идея состоит в том, чтобы сохранить как можно больше места для просмотра по вертикали при прокрутке страницы. (См. обновление ниже.) Я также просмотрел несколько сообщений, которые отслеживают прокрутку и вызывают js, но мне нужна помощь в создании функции (в blazor), которая добавляет/удаляет имя класса на основе если позиция прокрутки больше или меньше 50 единиц. Ссылка на публикацию для прокрутки: Как подписаться на событие onscroll в Blazor? Площадка Blazor для прокрутка: https://blazorrepl.telerik.com/GyPvmUbS13bnRDti38 [b]--UPDATE--[/b] Пока этот пост принят ответ на добавление класса, я также обнаружил, что с помощью CSS-анимации, управляемой прокруткой, можно достичь очень похожего результата без использования каких-либо скриптов. Вы не можете использовать позицию прокрутки в CSS, но вы можете анимировать практически что угодно, основываясь на прокрутке окна от 0 до 100%... https://tympanus.net/codrops/2024/01/17/a-practical- введение в анимацию-управляемую прокруткой с помощью CSS-прокрутки и просмотра/ [code] window.getScrollTop = (selector) => { return document.querySelector(".div").scrollTop }
DIV scrollTop: @ScrollTop
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
@code { [Inject] IJSRuntime JS {get;set;} public int ScrollTop { get; set; }
[/code] Я попробовал вызвать функцию для добавления/удаления класса в зависимости от положения прокрутки, но это не сработало. Ниже приведена статическая демонстрация того, чего я пытаюсь достичь.
[code](function() { "use strict";
/** * Easy selector helper function */ const select = (el, all = false) => { el = el.trim() if (all) { return [...document.querySelectorAll(el)] } else { return document.querySelector(el) } }
Мобильная версия