我是html中的新手,並試圖在div的左側創建滾動條。 我試圖谷歌它,但無法找到我想要的任何答案。如何在html中創建單獨的div中的滾動條
這裏是我的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Highlight dropzones with interact.js</title>
<script src="js/interact.js"></script>
<script src="js/dropzones.js"></script>
<link rel="stylesheet" href="stylesheets/dropzones.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
<body>
<object width="100%" height="100%" type="text/plain" data="/public/sensor/some.txt" border="0" >
<header>
<nav class="navbar navbar-inverse">
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a onclick="show()" id="imageLoad" target="dropzone_1">Image Load</a></li>
<li><a href="#" id="imageSave">Image Save</a></li>
</ul>
</div>
</nav>
</header>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<div name="scroll_div" id="scrolldiv1"></div>
<div class="dropzone-wrapper" name="dropzone_1" id="dropzone">
</div>
<script type="text/javascript">
function show(){
document.getElementById('dropzone').style.maxHeight = "100%";
document.getElementById('dropzone').innerHTML = "<img src= 'images/example3.jpg' class='resize_fit_center'/>"
}
</script>
<script>
function autoResizeDiv(){
document.getElementById('dropzone').style.height = window.innerHeight + 'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
function WebSocket(){
if ("WebSocket" in window){
var channel = "<%= user%>";
var socket = io.connect("websocket address");
socket.on(channel, function (d) {
var data = JSON.parse(d);
console.log(channel + " : " + d);
var theDiv = document.getElementById(data.node_info[1].info.mac);
if(theDiv == null) {
var divTag = document.createElement("div");
divTag.id = data.node_info[1].info.mac;
divTag.className = "draggable js-drag";
divTag.innerHTML = data.node_info[1].info.mac;
document.getElementsByName('scroll_div')[0].appendChild(divTag);
}
});
socket.on('crc_err', function(packet){
console.log("crc_err : " + packet);
});
socket.on('type_err', function(packet){
console.log("type_err : " + packet);
});
}
else{
// The browser doesn't support WebSocket
// alert("WebSocket NOT supported by your Browser!");
}
}
WebSocket();
</script>
</body>
</html>
我從WebSocket的獲取MAC地址信息,並試圖在div的左邊顯示的代碼。 並且想要製作一個滾動條,如上圖所示。我嘗試使用document.getElementsByName('scroll_div')[0].appendChild(divTag)
,但不在頁面的左側創建滾動條。
任何人都可以幫我在這裏......?
謝謝。
p.s.如果你們想讓我發佈css代碼,那麼我會馬上編輯。
是,CSS中最重要的部分。張貼它。看看下面的答案。我也有一個答案以及下面的代碼片段。看看有沒有幫助你。 – Iceman