畫面上有一些內(nèi)容顯示,

然后我要顯示一定數(shù)量的div元素,按照下拉框的數(shù)量,設(shè)置成橫向顯示.

下拉框的數(shù)量是一屏幕顯示的個數(shù), 總共的數(shù)量我暫時在source里面固定寫成40.

比如一屏顯示10個, 我就可以往右拖動滾動條 顯示所有的div.

現(xiàn)在的問題是,我的代碼的滾動條是窗口的,拖動的時候,屏幕上其他內(nèi)容也被拖動,看不到了,比如下拉框.

我想實現(xiàn)的功能是 在最外層container的div加上滾動條.

我source里面設(shè)置了 overflow-x: scroll 貌似不起作用.

直接上我的代碼

123

function createDiv() {

//假設(shè)總數(shù)

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下還存在子節(jié)點時 循環(huán)繼續(xù)

{

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

總結(jié)

以上是生活随笔為你收集整理的html左右滚动div隐藏部分div,只让DIV出现横向滚动条,窗口不要有滚动条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。