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

画面上有一些内容显示,
然后我要显示一定数量的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>
阅读 6.4k
2 个回答

重新修改。不知道是不是你想要的效果。
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;
}

修改后的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上会出现滚动条。
overflowscroll属性是无论是否会出现滚动,都会显示一个滚动条,所以#container下面是有一个不可以滚动的滚动条的,body的滚动条是可以滚动的。
所以,如上面代码所示,在#container外边包一层divdiv默认宽度是父元素的100%#container的长度超过了100%之后,会在div中进行横向滚动;而且,我用的是overflow-x: auto; auto是当出现造成可能滚动的情况时才会出现滚动条,具体设置成auto还是scroll看你的需求。

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