主页 / coding / 问题 / 79105447
Accepted
MrMustafa022
Asked: 2024-10-20 00:45:01 +0800 CST

如何让 CSS 在右侧滚动

  • 772

我是网页设计和 CSS 的新手，我需要让侧边栏 div 的滚动在右侧而不是左侧

HTML 方向是从右到左

我不希望侧边栏在左侧，只希望滚动而不是侧边栏本身

我试过了，但找不到任何解决方案，我试过使用 overflow-y 和 overflow-x，但没有用

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #1a1a1a;
}

.sidebar-link {
    text-decoration: none !important;
}

    .sidebar-link:hover {
        text-decoration: none !important;
    }

.sideBar li {
    list-style-type: none;
    margin-bottom: 0px;
}

.sideBar {
    z-index: 1000;
    background: #273c75;
    position: fixed;
    top: 10px;
    left: auto;
    padding: 40px 30px;
    box-shadow: 0 10px 20px #00000030;
    border-radius: 10px;
    max-height: 1000px;
    width: 120px;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    overflow-y: scroll;
    overflow-x: hidden;
}

    .sideBar .navLinks {
        width: 100%;
    }

        .sideBar .navLinks li {
            border-radius: 15px;
            padding: 5px;
        }

            .sideBar .navLinks li a {
                padding-right: 15px;
            }

    .sideBar .link {
        display: flex;
        height: 30px;
    }

    .sideBar .link-text {
        color: #fff;
        font-weight: 600;
        font-size: 16px;
        transform: scaleX(0);
        transform-origin: right;
        transition: all 0.2s ease;
        font-family: CairoFont;
    }

    .sideBar .link-icon {
        color: #fff;
        flex-basis: 30px;
        font-size: 21px;
        margin-left: 15px;
    }

    .sideBar .text-muted {
        color: #ccc;
        font-size: 21px;
        padding: 10px 0px;
        font-family: CairoFont;
    }

    .sideBar .navLinks li:hover {
        background: #fff;
    }

        .sideBar .navLinks li:hover .link > * {
            color: #2C3A47;
        }

    .sideBar:hover .link-text {
        transform: scaleX(1);
    }

    .sideBar:hover {
        width: 280px;
        align-items: flex-start;
    }
<!DOCTYPE html>
<html dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    
    

    <nav class="sideBar">

        <p class="text-muted">Test</p>
        <ul class="navLinks">
            <li>
                <a href="#" class="link sidebar-link">
                    
                    <span class="link-text">Text Link 1</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">
                    
                    <span class="link-text">Text Link 2</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">
                    
                    <span class="link-text">Text Link 3</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">
                    
                    <span class="link-text">Text Link 4</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">
                    
                    <span class="link-text">Text Link 5</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 6</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 7</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 8</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 9</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 10</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 11</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 12</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 13</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 14</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 15</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 16</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 17</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 18</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 19</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 20</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 21</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 22</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 23</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 24</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 25</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 26</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 27</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 28</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 29</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 30</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 31</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 32</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 33</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 34</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 35</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 36</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 37</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 38</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 39</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 40</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 41</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 42</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 43</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 44</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 45</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 46</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 47</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 48</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 49</span>
                </a>

            </li>
            <li>
                <a href="#" class="link sidebar-link">

                    <span class="link-text">Text Link 50</span>
                </a>

            </li>
        </ul>

    </nav>

    <main>
        
    </main>


</body>
</html>

html

2 个回答

  1. 仅当您的文档是用从右到左的语言（例如阿拉伯语）编写时，才应更改文本方向（使用dir="rtl"）。您不应使用它来实现其他目标，例如将侧边栏定位到主要内容的右侧。在使用 HTML 和 CSS 构建网站的 25 多年中，我从未使用过它。

    有几种方法可以让侧边栏显示在右侧。例如，您可以使用 和 来设置文档主体的样式display: flex，flex-direction: row-reverse或者使用display: grid，然后为每个子元素设置grid-row和grid-column。但是，我将要演示的解决方案只是使用position: absolute来将侧边栏显示在视口的右侧。

    :root {
  --clr-dark-blue: #273c75;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  color: #1a1a1a;
  margin: 0;
  background: aliceblue;
}

main {
  padding: 0 8em 0 1em;
}

nav {
  position: absolute;
  right: 0;
  top: 1em;
  width: 6em;
  background: var(--clr-dark-blue);
  padding: 1em 0.5em 1em 1em;
  box-shadow: 0 10px 20px #00000030;
  border-radius: 0.5em 0 0 0.5em;
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
  overflow-y: scroll;
  overflow-x: hidden;
  grid-column: 2;
  align-self: start;
}

nav:hover {
  width: 8em;
}

nav, nav a {
  color: white;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}

nav a {
  display: inline-block;
  text-decoration: none;
  padding: 0.5em;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.2s ease;
}

nav:hover a {
  transform: scaleX(1);
}

nav a:hover {
  color: var(--clr-dark-blue);
  background: white;
  border-radius: 8px;
}

.text-muted {
  margin-top: 0;
  color: #ccc;
  font-size: 21px;
}
    <nav>
  <p class="text-muted">Test</p>
  <ul>
    <li><a href="#">Text Link 1</a></li>
    <li><a href="#">Text Link 2</a></li>
    <li><a href="#">Text Link 3</a></li>
    <li><a href="#">Text Link 4</a></li>
    <li><a href="#">Text Link 5</a></li>
    <li><a href="#">Text Link 6</a></li>
    <li><a href="#">Text Link 7</a></li>
    <li><a href="#">Text Link 8</a></li>
    <li><a href="#">Text Link 9</a></li>
    <li><a href="#">Text Link 10</a></li>
    <li><a href="#">Text Link 11</a></li>
    <li><a href="#">Text Link 12</a></li>
    <li><a href="#">Text Link 13</a></li>
    <li><a href="#">Text Link 14</a></li>
    <li><a href="#">Text Link 15</a></li>
    <li><a href="#">Text Link 16</a></li>
    <li><a href="#">Text Link 17</a></li>
    <li><a href="#">Text Link 18</a></li>
    <li><a href="#">Text Link 19</a></li>
    <li><a href="#">Text Link 20</a></li>
    <li><a href="#">Text Link 21</a></li>
    <li><a href="#">Text Link 22</a></li>
    <li><a href="#">Text Link 23</a></li>
    <li><a href="#">Text Link 24</a></li>
    <li><a href="#">Text Link 25</a></li>
    <li><a href="#">Text Link 26</a></li>
    <li><a href="#">Text Link 27</a></li>
    <li><a href="#">Text Link 28</a></li>
    <li><a href="#">Text Link 29</a></li>
    <li><a href="#">Text Link 30</a></li>
  </ul>
</nav>

<main>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.</p>
  <p>Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  <p>Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.</p>
  <p>Curabitur eget ullamcorper justo, sit amet dictum neque. Fusce vitae ligula et felis auctor vulputate vel suscipit nibh. Integer a felis varius purus vestibulum viverra. Morbi venenatis placerat augue sit amet commodo. Sed dapibus molestie eros, vitae ultrices nunc commodo aliquam. Vivamus tempus mollis massa vel egestas. Donec ut ante quis eros commodo volutpat. Proin sem nisi, viverra ac sem tristique, consectetur laoreet sapien. Vivamus suscipit orci vel euismod scelerisque. Nullam sed pulvinar tellus. Nullam pulvinar arcu eget nibh rutrum, eget faucibus ligula ullamcorper.</p>
  <p>Sed sed cursus leo. Nam molestie eleifend leo, nec fermentum risus maximus ac. Pellentesque eget placerat ipsum. Vestibulum tempor quam justo. Fusce dapibus turpis non ante faucibus suscipit. Fusce rhoncus eleifend ipsum et lacinia. Curabitur nec congue arcu. Mauris dignissim magna ligula. Nullam ultrices, metus sit amet ultrices porttitor, turpis ligula interdum enim, eu pellentesque purus quam ut arcu. Nullam aliquet vitae tortor vel tincidunt. Fusce maximus lacus diam, sed elementum ligula condimentum vel. Sed consequat orci ac nunc gravida, at accumsan magna porttitor.</p>
  <p>Mauris vulputate quam ac purus laoreet, nec ultrices eros placerat. Fusce id nisi ex. Nunc ornare tellus nisl, suscipit fermentum quam sodales sit amet. Ut ex magna, tempor nec ex sed, ornare ornare sem. Proin gravida turpis urna, vitae posuere purus consequat sit amet. Donec laoreet tempor massa. Praesent porta mauris vitae neque condimentum, non volutpat felis eleifend.</p>
  <p>Aliquam aliquam a est eget cursus. Ut eu tempus justo, rutrum dapibus ex. In hac habitasse platea dictumst. Nulla ornare nisi sit amet arcu semper maximus. Praesent eu augue eget mi sodales sodales. Praesent sodales neque malesuada, euismod est in, lobortis turpis. Nam blandit facilisis mauris. Ut ac ex rhoncus, ornare velit ac, aliquam nibh. Quisque euismod mauris quis nisl consectetur vulputate. Pellentesque mattis, tellus ut dictum dictum, urna ligula sodales magna, euismod malesuada ipsum quam nec elit.</p>

</main>

    • 0
  2. Best Answer

    当您的侧边栏设置为右侧时，滚动条通常会出现在左侧。要将滚动条添加到侧边栏的右侧，您可以通过添加一行 CSS 来实现。

    方向：ltr；

    这会将滚动条移到右侧

    .sideBar {
z-index: 1000;
background: #273c75;
position: fixed;
top: 10px;
left: auto;
padding: 40px 30px;
box-shadow: 0 10px 20px #00000030;
border-radius: 10px;
max-height: 1000px;
width: 120px;
display: flex;
flex-direction: column;
transition: width 0.2s ease;
overflow-y: scroll;
overflow-x: hidden;
direction: ltr;

    }

    • 0

相关问题