Полоса прокрутки не исчезает при бесконечной прокрутке кладки MUI ⇐ CSS
Полоса прокрутки не исчезает при бесконечной прокрутке кладки MUI
У меня есть элемент MUI Masonry, который принимает изображения для бесконечной прокрутки. По какой-то причине CSS не избавляется от полосы прокрутки, и я перепробовал все, что мог придумать.
Отображение веб-кита: «none» раньше работало, а затем я добавил функциональность массива, и полоса прокрутки снова появилась.
import { useRef, useCallback, useEffect, useState } из «реагировать»; импортировать {useParams} из 'реагировать-маршрутизатор-дом'; импортировать {useInfiniteQuery} из «реагировать-запроса»; импортировать { getImagesPage } из '../../../services/media.service'; импортировать Masonry из @mui/lab/Masonry; импортировать {стиль} из '@mui/material/styles'; импортировать { Коробка, Типографика, Бумага } из «@mui/material»; импортировать { FontAwesomeIcon } из '@fortawesome/react-fontawesome'; импортировать { faCamera } из '@fortawesome/free-solid-svg-icons'; импортировать { useMediaQuery } из '@mui/material'; импортировать {useTheme} из '@mui/material'; импортировать FileUpload из '../../../utils/Buttons/FileUpload'; импортировать скелет из @mui/material/Skeleton; const ImageScroll = ({ список, тип, навигация }) => { const {Id} = useParams(); константная тема = useTheme(); const small = useMediaQuery(theme.breakpoints.only('sm')); const extraSmall = useMediaQuery(theme.breakpoints.only('xs')); константные столбцы = extraSmall? 2: (маленький ? 3:4); const maxHeightValue = extraSmall? '22em': '30em'; const [imageCount, setImageCount] = useState(0); константа { выборкаСледующая страница, имеетСледующая страница, isFetchingNextPage, данные, положение дел, ошибка } = useInfiniteQuery(`/${Id}`, ({pageParam = 1 }) => getImagesPage(Id, pageParam, type), { getNextPageParam: (lastPage, allPages) => { const nextPageNumber = allPages.length + 1; вернуть последнюю страницу.длина? номер следующей страницы: не определено; } }); const allImages = данные? data.pages.квартира() : []; useEffect(() => { если (данные) { setImageCount(prevCount => prevCount + data.pages.flat().length); } }, [данные]); useEffect(() => { возврат () => { если (intObserver.current) intObserver.current.disconnect() } }, []) const Item = styled(Paper)(({theme }) => ({ BackgroundColor: theme.palette.mode === 'темный'? '#1A2027': '#fff', ...theme.typography.body2, textAlign: 'центр', цвет: тема.палитра.текст.вторичный, boxSizing: 'border-box', линияВысота: 0, borderRadius: borderRadiusValue, })); const masonryContainerStyles = { maxHeight: maxHeightValue, // Определите максимальную высоту прокручиваемого поля overflowY: 'auto', // Делаем его вертикально прокручиваемым ширина: '100%', // Полная ширина отступ: '1em', borderRadius: '15px', '::-webkit-полоса прокрутки': { display: 'none' }, msOverflowStyle: 'нет', полоса прокрутки: 'нет' }; const intObserver = useRef(); const LastImageRef = useCallback(image => { если (isFetchingNextPage) возврат; если (intObserver.current) intObserver.current.disconnect(); intObserver.current = новый IntersectionObserver(записи => { if (entries[0].isIntersecting && hasNextPage) { выборкаСледующаяСтраница(); } }, { rootMargin: '0px' }); // Измените это значение по мере необходимости если (изображение) intObserver.current.observe(изображение); }, [isFetchingNextPage, fetchNextPage, hasNextPage]); if (статус === 'загрузка') { возвращаться ( {[0, 1, 2, 3, 4].map((item) => ( ))} ); } const borderRadiusValue = '20px'; константное содержимое = ( {allImages.map((изображение, я) => { const isLastImage = я === allImages.length - 1; const mediaElement = image._doc.mediaType === 'видео'? ( ) : ( ); возвращаться ( {медиаЭлемент} ); })} ); возвращаться ( {status === 'error' && Ошибка: {error.message
} {статус === 'успех' && ( data?.pages && data.pages.flat().length > 0? содержание : (
{ (маленький || экстрамаленький) ? ( Пока ничего, добавьте что-нибудь! ) : ( Пока ничего, будьте первым, кто что-то добавит! ) } ) )} { (listing.medias.length < 1) && } { (listing.medias.length > 0) && } ); } экспортировать ImageScroll по умолчанию; Я пробовал изменить ширину на ноль, пробовал изменить ее на CSS-файл и импортировать. Я попробовал изменить размер дисплея.
У меня есть элемент MUI Masonry, который принимает изображения для бесконечной прокрутки. По какой-то причине CSS не избавляется от полосы прокрутки, и я перепробовал все, что мог придумать.
Отображение веб-кита: «none» раньше работало, а затем я добавил функциональность массива, и полоса прокрутки снова появилась.
import { useRef, useCallback, useEffect, useState } из «реагировать»; импортировать {useParams} из 'реагировать-маршрутизатор-дом'; импортировать {useInfiniteQuery} из «реагировать-запроса»; импортировать { getImagesPage } из '../../../services/media.service'; импортировать Masonry из @mui/lab/Masonry; импортировать {стиль} из '@mui/material/styles'; импортировать { Коробка, Типографика, Бумага } из «@mui/material»; импортировать { FontAwesomeIcon } из '@fortawesome/react-fontawesome'; импортировать { faCamera } из '@fortawesome/free-solid-svg-icons'; импортировать { useMediaQuery } из '@mui/material'; импортировать {useTheme} из '@mui/material'; импортировать FileUpload из '../../../utils/Buttons/FileUpload'; импортировать скелет из @mui/material/Skeleton; const ImageScroll = ({ список, тип, навигация }) => { const {Id} = useParams(); константная тема = useTheme(); const small = useMediaQuery(theme.breakpoints.only('sm')); const extraSmall = useMediaQuery(theme.breakpoints.only('xs')); константные столбцы = extraSmall? 2: (маленький ? 3:4); const maxHeightValue = extraSmall? '22em': '30em'; const [imageCount, setImageCount] = useState(0); константа { выборкаСледующая страница, имеетСледующая страница, isFetchingNextPage, данные, положение дел, ошибка } = useInfiniteQuery(`/${Id}`, ({pageParam = 1 }) => getImagesPage(Id, pageParam, type), { getNextPageParam: (lastPage, allPages) => { const nextPageNumber = allPages.length + 1; вернуть последнюю страницу.длина? номер следующей страницы: не определено; } }); const allImages = данные? data.pages.квартира() : []; useEffect(() => { если (данные) { setImageCount(prevCount => prevCount + data.pages.flat().length); } }, [данные]); useEffect(() => { возврат () => { если (intObserver.current) intObserver.current.disconnect() } }, []) const Item = styled(Paper)(({theme }) => ({ BackgroundColor: theme.palette.mode === 'темный'? '#1A2027': '#fff', ...theme.typography.body2, textAlign: 'центр', цвет: тема.палитра.текст.вторичный, boxSizing: 'border-box', линияВысота: 0, borderRadius: borderRadiusValue, })); const masonryContainerStyles = { maxHeight: maxHeightValue, // Определите максимальную высоту прокручиваемого поля overflowY: 'auto', // Делаем его вертикально прокручиваемым ширина: '100%', // Полная ширина отступ: '1em', borderRadius: '15px', '::-webkit-полоса прокрутки': { display: 'none' }, msOverflowStyle: 'нет', полоса прокрутки: 'нет' }; const intObserver = useRef(); const LastImageRef = useCallback(image => { если (isFetchingNextPage) возврат; если (intObserver.current) intObserver.current.disconnect(); intObserver.current = новый IntersectionObserver(записи => { if (entries[0].isIntersecting && hasNextPage) { выборкаСледующаяСтраница(); } }, { rootMargin: '0px' }); // Измените это значение по мере необходимости если (изображение) intObserver.current.observe(изображение); }, [isFetchingNextPage, fetchNextPage, hasNextPage]); if (статус === 'загрузка') { возвращаться ( {[0, 1, 2, 3, 4].map((item) => ( ))} ); } const borderRadiusValue = '20px'; константное содержимое = ( {allImages.map((изображение, я) => { const isLastImage = я === allImages.length - 1; const mediaElement = image._doc.mediaType === 'видео'? ( ) : ( ); возвращаться ( {медиаЭлемент} ); })} ); возвращаться ( {status === 'error' && Ошибка: {error.message
} {статус === 'успех' && ( data?.pages && data.pages.flat().length > 0? содержание : (
{ (маленький || экстрамаленький) ? ( Пока ничего, добавьте что-нибудь! ) : ( Пока ничего, будьте первым, кто что-то добавит! ) } ) )} { (listing.medias.length < 1) && } { (listing.medias.length > 0) && } ); } экспортировать ImageScroll по умолчанию; Я пробовал изменить ширину на ноль, пробовал изменить ее на CSS-файл и импортировать. Я попробовал изменить размер дисплея.
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
MUI Grid — скрыть полосу прокрутки, но при этом сохранить возможность прокрутки.
Anonymous » » в форуме CSS - 0 Ответы
- 52 Просмотры
-
Последнее сообщение Anonymous
-
-
-
Полоса прокрутки без фиксированной высоты/Динамическая высота с полосой прокрутки
Anonymous » » в форуме CSS - 0 Ответы
- 53 Просмотры
-
Последнее сообщение Anonymous
-