1
resposta

Gridlist sem scroll aparente

Preciso de ajuda com o GridList do MaterialUI, quero fazer uma lista na horizontal dessa maneira https://material-ui.com/pt/components/grid-list/#single-line-grid-list porém gostaria de fazer isso sem aparecer a barra scroll, na parte de baixo, para isso vi que poderia fazer dessa forma utilizando o styled component

export const List = styled.div`
.MuiGridList-root::-webkit-scrollbar{
    width: 0px !important;
}
`;

funcionou parcialmente, agora não existe a barra mas para passar para os lados preciso pressionar a roda do mouse e arrastar para os lados, queria saber como posso fazer para arrastar para os lados com o próprio cursor do mouse

1 resposta

Fala ai Camila, tudo bem? Vamos la.

Sobre o problema do scroll, provavelmente é porque seu conteúdo está tendo mais largura do que o grid possui, dessa forma ele adiciona o scroll para visualizar o conteudo todo.

Tente aplicar um overflow-x: hidden e ajustar o conteúdo para não estourar.

Sobre arrastar para os lados com o mouse, é um pouco mais complexo e chato de fazer, dá uma olhada aqui: https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software