Next.js Discord

Discord Forum

nextjs tailwind-scrollbar is not working

Answered
Crazy ant posted this in #help-forum
Open in Discord
Crazy antOP
Hello All, I am looking for horizontal scroll. I installed tailwind-scrollbar pkg as dev a dependency.

Below code does not work.

<ul> <li className="scrollbar scrollbar-thumb-sky-700 overflow-x-scroll"> ....................... </li> </ul>

tailwind.config.js->
plugins:[ require('tailwind-scrollbar')({ nocompatible: true, preferredStrategy: 'pseudoelements', }), ]
nextjs version 14
Answered by Crazy ant
In nextjs 14 why ref.current.scrollLeft += 20 does not work. when I consol.log(ref.current), I could see container element in browser console <ul><li>.......</li><ul>. but when I console.log(ref.current.scrollLeft) , I see just 0 in every click but I should see 20 in first click, 40 in second click and so on. does it mean scrollLeft property cannot be accessible!. I used some trick and managed to implement scroll left and right. Its not straight forward in nextjs.
View full answer

16 Replies

Clown
Maybe you need to set a width?
Crazy antOP
@Clown , Could you tell me where do I need to set the width. Already tried -> <ul className="w-full">
@Crazy ant Hello All, I am looking for horizontal scroll. I installed tailwind-scrollbar pkg as dev a dependency. Below code does not work. `<ul> <li className="scrollbar scrollbar-thumb-sky-700 overflow-x-scroll"> ....................... </li> </ul>` tailwind.config.js-> `plugins:[ require('tailwind-scrollbar')({ nocompatible: true, preferredStrategy: 'pseudoelements', }), ] ` nextjs version 14
B33fb0n3
create a container like this:
<div className={"z-20 hidden md:block"} style={{
                transform: "rotate(-90deg) translateX(-100vh)",
                transformOrigin: "top left",
                overflowY: "scroll",
                overflowX: "hidden",
                position: "absolute",
                scrollbarWidth: "none",
                msOverflowStyle: "none",
                height: "100vw",
                width: "100vh"
            }}>
<div className={"flex"} style={{
                    width: "1215vw", // change this on how many times you have 100vw
                    transform: "rotate(90deg) translateY(-100vh)",
                    transformOrigin: "top left"
                }}>

Then you can scroll down horizontally
Crazy antOP
@B33fb0n3 , Thank you. I will try this and let you know.
Crazy antOP
@B33fb0n3 , It is working fine but horizontal scroll bar is not visible. I changed ->overflowX: "scroll". Actualy I want a horizontal visible scroll bar.Thank you.
riský
can i ask why you want to always have a scrolbar even when nothing to scroll (ie overflow: auto does if content to scroll and scroll always has it) - the only thing i can guess is if content is changing and you dont want the oage to get messy from scrollbar width
Crazy antOP
Actually Scroll bar is not visible even when content is scrolled to right and left. how could I change the color of bottom scrollbar. I changed below styles as msOverflowStyle: "scrollbar" & scrollbarColor:"#fff". My background is dark. After changing the styles also scroll bar is not visible on screen. I want horizontal scrollbar visible because my content is too long so there must be some visible scroll bar or button . I tried to provide scroll buttons too but scroll button does not work works so far. const leftClick = () => { ref.current.scrollLeft -= 80; } const rightClick = () => { ref.current.scrollLeft += 80; }
Crazy antOP
@B33fb0n3 , Yes screen moves with scrolling the mouse.Thanks for your help. Just one additional query -> Could we bind the scrolling with keyboard arrow left and arrow right event .
@Crazy ant <@301376057326567425> , Yes screen moves with scrolling the mouse.Thanks for your help. Just one additional query -> Could we bind the scrolling with keyboard arrow left and arrow right event .
B33fb0n3
yea, as the screen is just rotated, the scrolling behavior (mouse, keyboard) is the same is usuall, but rotated by 90 dreg
Crazy antOP
@B33fb0n3 , you mean no need to change anything in your code to have keyboard behaviour. At my end keybaord left and right arrows are not working, only up and down arrows are working to move the screen vertically up and down. Horizonal rotation is not happening by keybaord.
@Crazy ant <@301376057326567425> , you mean no need to change anything in your code to have keyboard behaviour. At my end keybaord left and right arrows are not working, only up and down arrows are working to move the screen vertically up and down. Horizonal rotation is not happening by keybaord.
B33fb0n3
yea, as I said: the screen is just rotated. So every behavior is like it would be, when you have vertical scrolling. You experience the behavior of vertical scrolling, because the screen is just rotated. If you want to integrate the scrolling though the left and right key on your keyboard, you need to listen to keyboard events (left and right key) and then scroll up and down inside the called function (because it's just rotated)
Crazy antOP
@B33fb0n3 Noted. Thanks
B33fb0n3
sure thing
Crazy antOP
In nextjs 14 why ref.current.scrollLeft += 20 does not work. when I consol.log(ref.current), I could see container element in browser console <ul><li>.......</li><ul>. but when I console.log(ref.current.scrollLeft) , I see just 0 in every click but I should see 20 in first click, 40 in second click and so on. does it mean scrollLeft property cannot be accessible!. I used some trick and managed to implement scroll left and right. Its not straight forward in nextjs.
Answer