画面上有一些内容显示,

然后我要显示一定数量的div元素,按照下拉框的数量,设置成横向显示.

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

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

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

我想实现的功能是 在最外层container的div加上滚动条.

我source里面设置了 overflow-x: scroll 貌似不起作用.

直接上我的代码

123

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;

}

}

}

}

}

html {

height: 100%;

}

body {

height: 100%;

margin: 0px;

}

#container {

/*width: 200%;*/

overflow-x: scroll;

}

2

4

6

8

10

20

OK