css - 水平滚动表格

标签 css html

<分区>


我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。

关闭 7 年前

在我的网页上here我目前有一个表,该表的列太多,并且在 x 方向上超出了它的支架。在 CSS 中,我对其进行了设置,以便显示水平 slider ,人们可以使用它在表格中向左/向右导航。这是在 CSS 中使用 overflow-x: auto; 实现的。

但是 slider 看起来已经过时了,Firefox 目前还不支持改变 slider。这就是为什么我决定通过像这样 overflow-x: hidden; 改变溢出来禁用 slider 。这隐藏了 slider ,但现在我无法向左/向右滚动表格。

有什么简单的解决方案可以让我在滚动条保持隐藏状态时左/右滚动表格?使用鼠标滚轮按住并拉动 操作完全没问题。

最佳答案

这个适用于水平方向,就好像它有可见的滚动条一样

更新:添加了一个 dragscroll 脚本

来源:http://qnimate.com/javascript-scroll-by-dragging/

#container1{
    height: 50px;
    width: 200px;
    border: 1px solid;
    overflow: hidden;
}

#container2{
    width: 100%;
    height: 99%;
    overflow: auto;
    white-space: nowrap;
    padding-bottom: 25px;   /* push scrollbar out of sight */
    margin-top: 15px;
    cursor:move;
}
<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>

<div id="container1"><div class="dragscroll" id="container2">
    hello 1
    hello 2
    hello 3
    hello 4
    hello 5
    hello 6
    hello 7
</div><div>

关于css - 水平滚动表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34977780/

上一篇:html - 为什么应用 float :right; in this specific case does it cause the div to go under the previous div?

下一篇:jquery - CSS从多个具有相同类的目标中定位正确的div

相关文章:

css - 如何在 css 中更改页脚背景颜色?

javascript - 如何为一个 div 设置动画以显示并移动到另一个 div 上方

javascript - 如何使用 js 或 jquery 或 php 在文本区域中显示格式化的 html 内容?

html - 如何使用 div 更改响应表行的高度

html - 如何控制显示为 :table; with a <p> element inside with display:table-cell 的 <div> 的宽度

javascript - 无法在 html head 中链接 css 和 js 文件

css - 如何不在较小的屏幕上加载对象

html - 媒体查询未正确缩放

javascript - 使用原生 JavaScript 在专用章节中自动创建(并按升序排序)脚注列表

jquery - 如何在 jQuery 中聚焦滚动条时禁用可拖动的 div