文章/答案/技术大牛

发布

js 水平滚动条

在JavaScript中处理水平滚动条通常涉及到DOM操作和CSS样式的控制。以下是关于水平滚动条的一些基础概念、优势、类型、应用场景以及常见问题的解答：

基础概念

滚动条：当内容超出其容器的显示范围时，浏览器会自动添加滚动条以便用户查看隐藏的部分。
水平滚动条：当内容的宽度超过容器的宽度时，会出现水平滚动条。

优势

用户体验：允许用户查看超出视口的内容。
布局灵活性：可以创建复杂的布局，如横向导航菜单或展示宽幅图片。

类型

默认滚动条：浏览器自带的滚动条样式。
自定义滚动条：通过CSS和JavaScript可以自定义滚动条的外观和行为。

应用场景

横向导航菜单：当菜单项过多时，可以使用水平滚动条。
图片画廊：展示一系列宽幅图片时，可以使用水平滚动条。
数据表格：当表格列数过多时，可以使用水平滚动条。

常见问题及解决方法

1. 如何隐藏水平滚动条但仍然允许内容滚动？

可以通过CSS来隐藏滚动条，但仍然保持内容的可滚动性。

.container {
  overflow-x: auto; /* 允许横向滚动 */
  -ms-overflow-style: none;  /* IE 和 Edge */
  scrollbar-width: none;  /* Firefox */
}

.container::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和 Opera */
}

2. 如何自定义水平滚动条的样式？

可以通过CSS伪元素来自定义滚动条的样式。

.container::-webkit-scrollbar {
  height: 10px; /* 滚动条的高度 */
}

.container::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道的背景色 */
}

.container::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条滑块的背景色 */
  border-radius: 5px; /* 滚动条滑块的圆角 */
}

.container::-webkit-scrollbar-thumb:hover {
  background: #555; /* 滚动条滑块悬停时的背景色 */
}

3. 如何通过JavaScript控制水平滚动条的位置？

可以使用JavaScript来控制滚动条的位置。

// 水平滚动到指定位置
document.querySelector('.container').scrollLeft = 100;

// 水平滚动到最右边
document.querySelector('.container').scrollTo({
  left: document.querySelector('.container').scrollWidth,
  behavior: 'smooth' // 平滑滚动
});

4. 如何检测水平滚动条的滚动事件？

可以通过监听scroll事件来检测滚动条的滚动。

document.querySelector('.container').addEventListener('scroll', function() {
  console.log('水平滚动位置:', this.scrollLeft);
});

示例代码

以下是一个完整的示例，展示了如何创建一个带有自定义水平滚动条的容器，并通过JavaScript控制其滚动位置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水平滚动条示例</title>
  <style>
    .container {
      width: 300px;
      overflow-x: auto;
      white-space: nowrap;
      border: 1px solid #ccc;
    }
    .item {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: #f0f0f0;
      text-align: center;
      line-height: 100px;
      font-size: 20px;
    }
    /* 自定义滚动条样式 */
    .container::-webkit-scrollbar {
      height: 10px;
    }
    .container::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 5px;
    }
    .container::-webkit-scrollbar-thumb:hover {
      background: #555;
    }
  </style>
</head>
<body>
  <div class="container" id="scrollContainer">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  <button onclick="scrollToRight()">滚动到最右边</button>

  <script>
    function scrollToRight() {
      const container = document.getElementById('scrollContainer');
      container.scrollTo({
        left: container.scrollWidth,
        behavior: 'smooth'
      });
    }
  </script>
</body>
</html>

这个示例展示了如何创建一个带有自定义水平滚动条的容器，并通过按钮点击事件将滚动条滚动到最右边。

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

有帮助

没帮助

Lightbox缩略图问题:查看图像时标题宽度变长

、、、

有一个奇怪的问题，我不太确定如何解决。我遇到的问题是，当网站在平板电脑或智能手机上浏览时。您可以通过查看以下链接查看此信息：

浏览 3提问于2016-02-18得票数 0

3回答

移除垂直滚动条，只设计水平滚动条

、、、

绑定以删除垂直滚动条并保持鼠标轮，但它也从列表或其他div中移除水平滚动条。非常感谢

浏览 5提问于2017-01-21得票数 0

回答已采纳

0回答

Handsontable -水平滚动条消失

、、、

我已经使用一个名为split.js的库创建了四个在四个窗口中平均分割的Handsontable实例。 overflow: auto;这将在所有GUI操作下成功地在垂直位置显示滚动条。然而，水平滚动条就有点问题了。具体地说，在窗口的初始加载时，看不到水平滚动条。但是在拖动split.js栏的时候，滚动条又神奇地出现了！但是，在单击容器内的手

浏览 32提问于2017-06-08得票数 3

回答已采纳

2回答

我需要GridView的水平滚动

、

我有我的GridView在另一个面板中，我有滚动条，但GridView太大了，即使有分页。因此用户需要向下滚动才能水平滚动(以查看水平滚动条)。如何在面板中为我的GridView添加任何水平滚动技巧。也许是来自javascript的东西？我的js知识仍然很差。谢谢。

浏览 2提问于2010-11-30得票数 0

回答已采纳

2回答

带有溢出-x隐藏的父级的div上的编程滚动

、、

JS Fiddle：问:我想了解为什么会发生这样的事情。如果没有水平滚动条的出现，我如何才能让滚动条工作呢？(使用css 不隐藏水平滚动条不是选项)更新1：父位置似乎不影响这一点

浏览 5提问于2017-06-28得票数 1

回答已采纳

6回答

如何使用java在窗口内水平滚动滚动条

、

我的问题是水平滚动滚动条，这是在窗口内，我使用这段代码，但它滚动窗口的水平条，而不是确切的滚动条在窗口内。scroll = driver.findElement(By.xpath("//div[@id='gvLocationHorizontalRail']")); js.executeScript("w

浏览 1提问于2016-02-17得票数 6

2回答

如何设置剑道网格水平滚动条？

、

我有kendo窗口，它显示垂直和水平滚动条都在网格上，我如何才能实现水平滚动条和禁用垂直，任何建议。下面的代码sortable: true, previousNext: false,

浏览 1提问于2015-02-24得票数 3

回答已采纳

3回答

获取视口高度(不包括水平滚动条)？

、、、

window.innerHeight给出视口的高度，包括水平滚动条的高度。是否有一种方法可以找到可用的内部高度，即不包括水平滚动条？理想情况下，我正在寻找一个纯JS解决方案，但如果没有，jQuery等也可以。

浏览 4提问于2013-10-31得票数 6

1回答

如何在网格中添加滚动条

、

你好, 我需要帮助添加一个滚动条在顶部，标题后，水平滚动条。非常感谢它在react js中的作用。

浏览 11提问于2019-12-05得票数 0

3回答

CKEditor自动增长插件垂直滚动条闪烁问题

、、、

我有一个关于CKEditor自动增长插件的问题：<iframe scrolling="no" style="width:100%;height:100%;overflow:hidden;" frame

浏览 14提问于2011-12-13得票数 8

1回答

CSS jQuery滚动窗格问题

、

我正在使用jquery.jscrollpane.js把滚动条放在div上。它似乎在下面的页面底部放置了一个水平滚动条，有谁能帮忙吗？

浏览 1提问于2011-06-24得票数 0

1回答

如何使全局滚动条只应用于一个元素

、、、、

几个月前，我发现中有人提出类似的问题，但给出的解决方案只是禁用页面滚动条，并为元素启用滚动条。我想要做的是保留页面滚动条，但让它只滚动一个元素。我尝试过的解决方案：是否有一种使页面滚动条应用于特定元素的好方法，其中CSS position

浏览 20提问于2017-08-23得票数 1

1回答

div尺寸自动调整内容

、

我试图创建一个只使用HTML5 5/CSS3 3的容器div元素，它根据以下规则调整其大小以适应其内容： background-col

浏览 3提问于2014-12-15得票数 0

回答已采纳

7回答

100vw导致水平溢出，但仅当一个以上时？

假设你有这个：你会看到一些充满屏幕的东西，没有滚动条。但是添加另一个：你得到的不仅是垂直滚动条(期望的)，还有一个轻微的水平滚动条。

浏览 258提问于2014-04-29得票数 135

回答已采纳

1回答

因此，我有大约8页，或多或少，我希望用户能够滚动到每一个水平。然而，这8页中的每一页都很长，并且每个页面都需要一个垂直滚动条。因此，当用户使用水平滚动条时，他们应该能够导航不同的页面，但是当使用垂直滚动条时，他们应该能够在他们正在查看的页面上上下滚动。我查看了fullpage.js和sly.js，我不太确定哪一个是实现这种设计的最佳选择。另外，如果有人对如何做到这一点有任何其他的建议，那也是很棒的。

浏览 4提问于2015-12-21得票数 2

回答已采纳

1回答

如何在Ext js Grid中放置水平滚动条

、、、

如何在Ext js Grid中放置水平滚动条。请帮帮忙

浏览 2提问于2010-07-28得票数 0

回答已采纳

1回答

更改水平滚动条的宽度。定制滚动条？

、、

我有一个带有多张卡片的div，因为我使用的是我得到一个水平滚动条在我的div下，我想要。也就是说，该条占用了div的宽度，但我更希望有一个更自定义的滚动条，它只占div的50%-75%。在css/js中是否有一种方法允许我更改水平滚动条的宽度，所有的标记似乎都指向no。如果是这样的话，任何人都有创建自定义滚动条的经验吗？我最初的想法是创建一个输入滑块，该滑块具有相同的每张卡片的滴答数，并滚动到每个卡片onChange

浏览 2提问于2018-10-24得票数 3

1回答