文章/答案/技术大牛

发布

css左右滚动条

CSS 左右滚动条基础概念

CSS 左右滚动条通常用于在一个固定宽度的容器中展示超出容器宽度的内容。通过设置容器的 overflow-x 属性为 scroll 或 auto，可以实现水平滚动条的效果。

类型

自动滚动条 (overflow-x: auto)：当内容超出容器宽度时，浏览器会自动显示滚动条。
始终显示滚动条 (overflow-x: scroll)：无论内容是否超出容器宽度，滚动条都会显示。

应用场景

长表格：当表格内容过长时，可以使用左右滚动条来展示所有列。
图片画廊：在图片画廊中，可以使用滚动条来展示多张图片。
侧边栏：在侧边栏中，可以使用滚动条来展示更多内容。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 左右滚动条示例</title>
    <style>
        .scroll-container {
            width: 300px;
            overflow-x: auto;
            border: 1px solid #ccc;
        }
        .scroll-content {
            display: inline-block;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-content">
            <p>这是一个很长的文本内容，宽度超过了容器的宽度，因此需要使用左右滚动条来查看所有内容。</p>
            <p>这是一个很长的文本内容，宽度超过了容器的宽度，因此需要使用左右滚动条来查看所有内容。</p>
            <p>这是一个很长的文本内容，宽度超过了容器的宽度，因此需要使用左右滚动条来查看所有内容。</p>
        </div>
    </div>
</body>
</html>

参考链接

MDN Web Docs: overflow-x

常见问题及解决方法

滚动条不显示：
- 确保容器有固定的宽度。
- 确保 overflow-x 属性设置为 scroll 或 auto。
- 检查是否有其他 CSS 样式影响了滚动条的显示。

滚动条样式问题：
- 可以使用 CSS 自定义滚动条的样式。例如：
- 可以使用 CSS 自定义滚动条的样式。例如：
滚动条影响布局：
- 确保容器和内容的宽度设置正确，避免滚动条影响整体布局。

通过以上方法，可以有效解决 CSS 左右滚动条的相关问题。

页面内容是否对你有帮助？

有帮助

没帮助

CSS动画轻微闪烁

html、css、css-transitions、css-animations

我正在尝试使用CSS动画，并且只使用Css动画制作了一个简单的页面过渡效果。问题是当动画完成时，会产生轻微的闪烁。你们能推荐一些解决这个问题的方法吗？下面是代码。

浏览 17提问于2018-08-16得票数 0

回答已采纳

1回答

保持元素居中不受滚动条的影响

javascript、jquery、html、css

我保持我的网站上的所有元素，居中，但当滚动条显示或隐藏时(通过按顶部导航上的菜单按钮可以看到)，由于滚动条造成的屏幕宽度不同，元素会左右抖动几个像素。有没有什么HTML、CSS或Javascript的方法来否定这一点呢？谢谢!

浏览 2提问于2016-12-25得票数 0

1回答

自定义滚动:如何隐藏滚动条，并创建一个按钮，将滚动点击？

jquery、html、css、scroll、scrollbar

我有一个包含文本的div，当文本太长而不能放进一行时，它会显示滚动条，允许用户左右滚动。我的客户想要删除滚动条(但保持滚动功能)，而有一个箭头，用户可以点击滚动。这在css/jquery中是可能的吗?

浏览 3提问于2019-02-27得票数 0

回答已采纳

1回答

当我在div上有min-width时，滚动条不会增加宽度

html、css

我有一个div，它有overflow:auto和我的内容有一个设置的宽度，(6张照片)当没有滚动条时，它们是很好的，但是当内容去强制overflow添加一个滚动条而不是添加滚动条宽度到当前div的宽度时

浏览 0提问于2012-01-18得票数 2

回答已采纳

2回答

按像素量水平滚动div，无滚动条

javascript、jquery、html、scrollto

我希望容器的宽度显示为窗口的100%，并且我还希望在底部没有水平滚动条。如果它可以横向滚动，那就太好了，但它不是必须的。我只是在寻找一个功能和激活左/右按钮的功能的方法。

浏览 0提问于2012-09-26得票数 0

回答已采纳

1回答

SmoothDivScroll -更改溢出内容的不透明度，而不是隐藏它

jquery、smooth-scrolling

我的第一个关于堆栈溢出的问题。

浏览 0提问于2013-11-15得票数 0

1回答

如何将滚动箭头按钮添加到左右滚动轮

javascript、jquery、html、css

嗨，我想知道是否可以替换一个滚动条，该滚动条可以左右移动，并在左右两侧放置某种类型的箭头，使您可以滚动或移动左右滚动条，以使其更容易。

浏览 5提问于2015-10-20得票数 1

回答已采纳

1回答

当页面上没有足够的内容时，将出现一个垂直滚动条，因此页面上将出现两个滚动条。我使用的是左右面板的数据显示=“推送”(如果这是相关的话)。也许问题在于我如何包含我的CSS文件？在我的“主”CSS文件中，我覆盖了一些jQuery移动CSS样式。这是自定义jQuery移动CSS的正确方式吗?除了使用Themeroller之外，我还没有使用它呢？我注意到的一件事是，如果我将ui内容类从overflow:隐含更改为overflow:visible，那么滚动条就

浏览 0提问于2014-10-02得票数 0

2回答

在电话视图中Bootstrap 2.3.2的排水沟问题

html、twitter-bootstrap、css、twitter-bootstrap-2

Heyho！我真的不明白如何处理2.3.2版本下的电话视图。

浏览 7提问于2015-07-13得票数 0

回答已采纳

4回答

没有滚动条的图像的全宽和全高

html、css

图像本身附加了这个CSS width: 100%;}html, body {} margin: 0;不知何故，出现了一个垂直滚动条。滚动范围可能在5px左右，所以它真的很小。我怎样才能删除这个？我希望img是全屏的，没有滚动条。

浏览 1提问于2018-10-12得票数 0

1回答

Android在HTML容器中滚动，该容器具有CSS溢出属性

javascript、android、html、css

在PC上，滚动条是可见的，这样用户就可以左右滚动。这里需要一些特殊的CSS和JS吗？有人知道为什么会这样吗？

浏览 2提问于2012-09-10得票数 1

回答已采纳

1回答

滚动条上的向下箭头消失。

jquery、html、css、datatables、scrollbar

我有一个datatable，每次我使浏览器的宽度非常小(我不确切地知道，但它小于700左右)。滚动条上的向下箭头从屏幕上消失，在它应该在的位置下面。但是如果我把宽度变大，滚动条就在那里。我尝试了以下几点： $("#table-tab").find('.dataT

浏览 0提问于2013-12-04得票数 0

回答已采纳

1回答

当滚动条可见时将页面内容向右移动？

jquery、html、css

当滚动条可见时，是否可以使用jQuery将页面内容(比如10px )向右移动？它不能自动显示的原因是因为我的内容通过jQuery扩展，当它到达高度超过浏览器高度的点时，滚动条就会显示，导致所有页面内容在10px左右向右移动。我希望它不会发生这种情况，并且内容保持在相同的位置，而滚动条是可见的。我不确定像body { scroll-bar: x; }这样的CSS属性(我假设scroll-bar是滚动条的正确属性)是否可以用作jQuery选择器，即使是这样，它又是如何工作的？

浏览 0提问于2011-09-10得票数 0

回答已采纳

4回答

停止将窗口大小调整到768px以下

javascript、html、css

我希望整个页面(窗口)停止调整大小低于768px，不应该有任何低于768px的水平滚动。有没有办法做到这一点？

浏览 1提问于2016-11-21得票数 0

1回答

如何避免HTML/CSS中动态页面中滚动条的偏移量

javascript、jquery、html、css

我正在使用Javascript和jQuery在HTML/CSS中创建一个动态页面。此页面的高度可以更改，滚动条可以出现或消失。另外，我希望内容以中心为中心。但是，当滚动条显示自身(或隐藏自身)时，页面在侧面移动一点点。编辑您可以单击标题来扩展/撤回其下的内容。

浏览 1提问于2015-09-18得票数 1

2回答

禁用Div上的水平滚动

css、scroll、overflow

当具有固定高度的div的内容最终变得比div更大时，我们需要一个滚动条，但是滚动条去掉了一些宽度，因此添加了一个水平条。我们如何防止水平滚动，即使内容太宽，我不希望用户能够水平滚动的能力。CSS3属性overflow-x:hidden仍然允许用户使用触控板左右滚动。我想要完全禁用它，或者一个解决方案，消除垂直滚动条从div中获取宽度的问题。太棒了

浏览 1提问于2011-09-09得票数 7

4回答

使没有内容的div水平滚动

javascript、jquery、html、css、horizontal-scrolling

id="dummyScrollArea" style="width: 750px;"></div> 我想用id=dummyHorizontalDiv在div上获得一个水平滚动条，但由于内部div中没有内容(尽管它的宽度大于外部div的宽度)，所以我得不到水平滚动条。

浏览 3提问于2011-12-07得票数 1

回答已采纳

1回答

按滚动条宽度移动居中内容的页面

html、css、layout、scrollbar

然而，问题是，一旦出现一个滚动条，整个内容就会向左移动一半滚动条的宽度。 content is shifted left by the width of the scroll bar<br /><br /><br &#

浏览 0提问于2014-11-01得票数 0

回答已采纳

2回答

固定页脚与最小宽度，需要能够滚动

jquery、css

bottom: 0px; min-width:1300px;}$('html, body').css({'height': '100%'}); 当窗口小于1300px，滚动条出现时，我如何让它左右滚动？

浏览 2提问于2013-07-02得票数 0

回答已采纳

5回答

垂直滚动条通向水平滚动条

css、scrollbar、horizontal-scrolling、vertical-scrolling

我的CSS看起来像这样： position: absolute; height: auto;现在的问题是：如果出现垂直滚动条，它们将占用大约10px的水平空间，因为滚动条将放置在div内部。但是，宽度不会自动缩放，以允许垂直滚动条使用这些额外的10个左右的像素。由于添加垂直滚动条</e

浏览 110提问于2012-11-27得票数 43

回答已采纳

点击加载更多

css左右滚动条