div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？

kyle

661511

发布于
2017-09-07

div内容超出边界后怎样滑动，而且不显示滚动条？
未超出边界是这样的：
图片描述

超出边界后：

图片描述

请问怎样才能在超出边界后不换行，变成可以左右滑动，而且不显示滚动条？

网上查了一些办法，说用一些第三方库，又没有简洁的实现方法？

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fix</title>
    <style>
        .state {
            margin: 15px 0 0 0;
            padding: 5px 0 8px 15px;
            background-color: rgb(84, 46, 69);
        }
        
        .state a {
            font-size: 13px;
            text-decoration: none;
            color: #999;
            padding: 1px 5px;
        }
        
        .state .active {
            font-weight: bold;
            color: #ddd;
            padding-bottom: 2px;
            border-bottom: 3px solid rgb(77, 111, 0);
        }

    </style>
</head>

<body>
    <div class="state">
        <a class="active">111</a>
        <a>222</a>
        <a>333</a>
        <a>444</a>
        <a>555</a>
        <a>666</a>
        <a>777</a>
        <a>888</a>
        <a>999</a>
        <a>000</a>
        
        <a>555</a>
        <a>666</a>
        <a>777</a>
        <a>888</a>
        <a>999</a>
        <a>000</a>
    </div>
</body>

</html>

html javascript css

阅读 18.9k

8 个回答

userId

    纯手写 滚动条隐藏掉就行了
    CSS:
    .wrap{
        overflow: hidden;
        height: 40px;
    }
    .cont{
        height: 60px;
        overflow-x: auto;
        overflow-y:hidden ;
        position: relative;
    }
    .state {
        left: 0px;
        top: 0px;
        position: absolute;
        height: 60px;
        background-color: rgb(84, 46, 69);
        overflow-x: auto;  
        white-space: nowrap;
        display: flex;          
    }
    
    .state li{
        display: inline-block;
        float: left;
        font-size: 13px;
        text-decoration: none;
        color: #999;
        padding: 1px 5px;
        border-bottom: 2px solid rgb(84, 46, 69);
    }
    
    .state .active {
        font-weight: bold;
        color: #ff6c00; 
        border-color: rgb(84, 46, 69);          
    }

html:

<div class="wrap">
<div class="cont">
<ul class="state">
    <li class="active">111</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
</ul>
</div>
</div>

kyle

661511

发布于
2017-09-07

我找到一个方法：

    // 1. state添加两个属性，保证超出范围后不换行
    
    .state {
        overflow-x: auto;
        white-space: nowrap;
        ...
    }
   
   // 2.隐藏滚动条
    ::-webkit-scrollbar {
        display: none;
        
        /* 或者这样
        width: 0;
        height: 0;
        */
    }

已注销

88313352

发布于
2017-09-07

超出了边界，手机上最简单的就是使用滚动条。而且手机上的滚动条，现在大多都是当滑动的时候才会出现，不滑动的时候是默认隐藏的。如果你不想使用滚动条。那么只有使用js监听手势，然后调整父容器的left的值

T_one

1.3k51531

发布于
2017-09-07

更新于
2017-09-07

可以这样：

<div class="box1">
    <div class=box2>
    </div>
</div>

.box1{
    height:100px;
    overflow: hidden;
}
.box2{
   height:120px;
   overflow-x: auto;
}
box2比box1更高，box2滑动的话就看不见滑动条了。

陌路凡歌

7.9k21119

发布于
2017-09-07

更新于
2017-09-07

外部div定宽度overflow: hidden;内部的超出长度的div用transform: translateX(0px);手指拖动时改变transform: translateX(-XXXpx);大概原理就是这样的。嫌麻烦的话用better-scroll这个插件吧

void

188125

发布于
2017-09-07

障眼法

.state{
    position:relative;
    overflow-x:auto;
    white-space:no-wrap;
}
.state:after{
    content:"";
    position:absolute;
    lef:0;
    right:0;
    bottom:0;
    height:10px;
    background:white;
}