问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

只让DIV出现横向滚动条,窗口不要有滚动条

头像
箱子
    78515

    画面上有一些内容显示,
    然后我要显示一定数量的div元素,按照下拉框的数量,设置成横向显示.

    下拉框的数量是一屏幕显示的个数, 总共的数量我暂时在source里面固定写成40.

    比如一屏显示10个, 我就可以往右拖动滚动条 显示所有的div.

    现在的问题是,我的代码的滚动条是窗口的,拖动的时候,屏幕上其他内容也被拖动,看不到了,比如下拉框.

    我想实现的功能是 在最外层container的div加上滚动条.
    我source里面设置了 overflow-x: scroll 貌似不起作用.

    直接上我的代码

    <html>

<head>
    <title>123</title>
    <script type="text/javascript">
        function createDiv() {
            //假设总数
            var total = 40;
            var s1 = document.getElementById('s1');
            var numOfPage = s1.value
            var container = document.getElementById('container');

            //清除上次的append的div
            var hasChild = container.children.length ? true : false;
            if (hasChild) {
                while (container.hasChildNodes()) //当div下还存在子节点时 循环继续
                {
                    container.removeChild(container.firstChild);
                }
            }

            var page = Math.ceil(total / numOfPage);
            //控制横屏大小
            container.style.width = page * 100 + "%";

            var rowColumun = {
                '2': {
                    'row': 2,
                    'column': 1
                },
                '4': {
                    'row': 2,
                    'column': 2
                },
                '6': {
                    'row': 2,
                    'column': 3
                },
                '8': {
                    'row': 2,
                    'column': 4
                },
                '10': {
                    'row': 2,
                    'column': 5
                },
                '20': {
                    'row': 4,
                    'column': 5
                }
            };

            var {
                row,
                column
            } = rowColumun[numOfPage];

            column = column * page;


            var columnWidth = 99 / column + "%";

            var percentH = 95 / row + '%';

            let loopCount = total;

            if (loopCount > 0) {
                all: for (var i = 0; i < column; i++) {
                    var columnDiv = document.createElement("div");
                    columnDiv.style.cssText = "margin:1px; float: left;" + "width:" + columnWidth + ";"
                    container.appendChild(columnDiv);
                    for (var j = 0; j < row; j++) {
                        var rowDiv = document.createElement("div");
                        rowDiv.style.cssText = "margin:2px; box-sizing: border-box;-webkit-box-sizing: border-box;height:" + percentH + ";background-color: #00aa00;" + "width:100%;";
                        rowDiv.innerHTML = ' column' + (i + 1) + ' row:' + (j + 1);
                        columnDiv.appendChild(rowDiv);
                        loopCount--;
                        if (loopCount <= 0) {
                            break all;
                        }
                    }

                }
            }
        }
    </script>
    <style>
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
            margin: 0px;
        }
        
        #container {
            /*width: 200%;*/
            overflow-x: scroll;
        }
    </style>

</head>

<body>
    <select id="s1">
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="8">8</option>
    <option value="10">10</option>
    <option value="20">20</option>
  </select>
    <button onclick="createDiv()">OK</button>
    <div id="container" />


</body>

</html>
    csshtml5
    阅读 6.4k
    2 个回答
    得票最新
    头像
    Fiona
      264611
      ✓ 已被采纳

      重新修改。不知道是不是你想要的效果。
      html:

      <div class='select-container'>
    <select id="s1">
             <option value="2">2</option>
            <option value="4">4</option>
            <option value="6">6</option>
            <option value="8">8</option>
            <option value="10">10</option>
            <option value="20">20</option>
        </select>
        <button onclick="createDiv()">OK</button>
    </div>
   
    <div id="box">
    <div id="container"></div>
    </div>

      css:

      html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0px;
}

#container {
    margin-top:30px;
    
}
#box{
    overflow-x: scroll;
}
.select-container{
    position:fixed;
    top:0;
    left:20px;
}
      头像
      luckness
        6.2k2216

        修改后的style样式如下：

        <style>
    html {
        height: 100%;
    }
    
    body {
        height: 100%;
        margin: 0px;
    }
    
    .scrollWrapper {
      overflow-x: auto;
    }
</style>

        修改后的html代码如下：

        <body>
    <select id="s1">
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="6">6</option>
        <option value="8">8</option>
        <option value="10">10</option>
        <option value="20">20</option>
    </select>
    <button onclick="createDiv()">OK</button>
    <div class="scrollWrapper">
          <div id="container"></div>
    </div>
</body>

        因为你的#container元素会动态计算宽度，而且#container里面的元素的大小也是根据这个元素的大小计算的百分比，所以子元素的长度不会超过#container容器的宽度，所以其实并没有产生滚动的条件。而body的大小是小于#container容器大小的，所以body上会出现滚动条。
        overflow的scroll属性是无论是否会出现滚动，都会显示一个滚动条，所以#container下面是有一个不可以滚动的滚动条的，body的滚动条是可以滚动的。
        所以，如上面代码所示，在#container外边包一层div，div默认宽度是父元素的100%，#container的长度超过了100%之后，会在div中进行横向滚动；而且，我用的是overflow-x: auto; auto是当出现造成可能滚动的情况时才会出现滚动条，具体设置成auto还是scroll看你的需求。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题