React tailwind css - 右侧位置显示滚动条

Question

我有一个带有显示隐藏按钮的粘性框，如图所示。它正在工作，但如果我试图隐藏水平滚动条并且可以看到如图 2 所示的框。要折叠框，我将 right-0 更改为 -right-24。反正有没有不显示水平滚动条的。

图1-：显示粘滞条，可以点击设置图标隐藏粘滞条。没有水平滚动条。

图2-：隐藏条后出现水平滚动条，滚动时可以看到方框

const TrackPage = () => {

  const handleMenuCollapse = (e) => {
    e.preventDefault();
    setColapse(!colapse);
  };

  return (
    <>
      <div>
        <div
          className={`flex w-24 h-96 absolute top-[calc((100vh-384px)/2)]  ${
            colapse ? "-right-24" : "right-0"
          } " bg-primary rounded-b-lg items-center justify-center`}
         >
          <div
            className="flex w-12 h-12 absolute -top-0 -left-12 cursor-pointer bg-primary rounded-l-lg items-center justify-center"
        onClick={handleMenuCollapse}
          >
            <SettingIcon />
           </div>
          Setting
         </div>
 
      </div>
    </>
  );
};

export default TrackPage;

App.jsx

import React, { useState, useEffect } from "react";
import Header from "./components/header";
import SideMenu from "./components/side_menu";
import AppRoutes from "./routes";
import withUser from "./hocs/with_user";
import { isMobile } from "react-device-detect";
import { useLocation } from "react-router-dom";
import { AuthProvider, setAccessToken } from 
"./auth/auth_provider";
import { Toaster } from "react-hot-toast";
import AppContext from "./components/app_context";
import "./i18n";
import "./App.css";

function App(props) {
   const [colapse, setColapse] = useState(isMobile);
   const [sideBarFull] = useState(true);
   const location = useLocation();

  const IsNormalPage = () => {
     const blankPages = ["/login"];

     for (let i = 0; i < blankPages.length; i++) {
       if (location.pathname.startsWith(blankPages[i])) return 
 false;
    }
     return true;
   };

  useEffect(() => {
     if (props.user) setAccessToken(props.user.t);
   }, []);

  const PageHeader = () => {
     return (
       <div className="h-[72px] w-full flex items-center align-middle justify-center bg-neutral shadow">
         <div className="w-full text-center">
          <Header />
         </div>
        </div>
      );
    };


  return (
     <AuthProvider user={props.user}>
      <AppContext.Provider
        value={{
           colapse: colapse,
           setColapse: setColapse,
          }}
         >
        <div className="relative w-full min-h-screen h-full">
          <div className="flex flex-row min-h-screen">
            <div className="w-auto z-0 ">
               <div className="flex-1 w-full max-h-screen mx-auto text-lg h-full shadow-lg bg-white overflow-y-auto">
            {IsNormalPage() && <SideMenu showFullMenu={sideBarFull} />}
          </div>
        </div>
        <div className="w-full max-h-screen flex flex-col z-10">
          {IsNormalPage() && <PageHeader />}
          <div className="flex-1 w-full max-h-screen mx-auto text-lg h-full shadow-lg bg-white overflow-y-auto">
            <Toaster />
            <AppRoutes />
          </div>
        </div>
      </div>
    </div>
  </AppContext.Provider>
</AuthProvider>
  );
}

export default withUser(App);

Answer 1

我想出了一个解决方案

首先让我们divide把这个部分分成两部分（设置图标和你想要的更大的divide）

然后将其添加到大 div 类名中：${colapse ? "hidden" : "right-0"} 这样它就会被隐藏而不是 -right-24

对于图标 div 将其添加到其类名中：${colapse ? "animate-pulse right-0": "right-24"} 动画当然是可选的，我刚刚添加了它。

这是代码，但我忘记了并将组件命名为 Side.jsx 而不是 TrackPage.jsx

import React, { useState } from "react";

function Side() {
  const [colapse, setColapse] = useState(true);
  const handleMenuCollapse = (e) => {
    e.preventDefault();
    setColapse(!colapse);
  };
  return (
    <div>
      {/** the big div */}
      <div
        className={`flex w-24 h-96  bg-indigo-500 absolute top-[calc((100vh-384px)/2)]  ${
          colapse ? "hidden" : "right-0"
        } " bg-primary rounded-b-lg items-center justify-center`}
      >
        Setting
      </div>

      {/** the icon div */}
      <div
        className={`flex w-12 absolute  top-[calc((100vh-384px)/2)] h-12 bg-indigo-500
                ${colapse ? "animate-pulse right-0" : "right-24"}
                cursor-pointer bg-primary rounded-l-lg items-center justify-center`}
        onClick={handleMenuCollapse}
      >
        <div className="w-5 h-5 bg-white rounded-full " />
      </div>
    </div>
  );
}

export default Side;

看看Live codesandbox。

React tailwind css - 右侧位置显示滚动条

React tailwind css -right position show scroll bar

reactjs

tailwind-css