2017-03-16 57 views
0

我是html中的新手,並試圖在div的左側創建滾動條。 我試圖谷歌它,但無法找到我想要的任何答案。如何在html中創建單獨的div中的滾動條

這裏是我的html形象。 enter image description here

這裏是我的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代碼,那麼我會馬上編輯。

+0

是,CSS中最重要的部分。張貼它。看看下面的答案。我也有一個答案以及下面的代碼片段。看看有沒有幫助你。 – Iceman

回答

1

你可以使用overflow:在你的scroll中滾動scroll_div div。 overflow屬性指定如果內容溢出元素的框會發生什麼。

此屬性指定當元素的內容太大而無法放入指定區域時是否剪裁內容或添加滾動條。

注意:溢出屬性僅適用於具有指定高度的塊元素。

div.scroll 
 
{ 
 
width:50%; 
 
height:100px; 
 
overflow:scroll; 
 
float: left; 
 
}
<div class="scroll">The overflow property specifies what happens if content overflows an element's box. 
 
<br/> 
 
This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area. 
 
<br/> 
 
Note: The overflow property only works for block elements with a specified height. </div>

+0

感謝您的答案,我做了滾動條。我能再問一個問題嗎? – paulc1111

+0

你可以問,但如果需要長時間的解釋,請發表一個新的問題 – BioGenX

+0

這很簡單的問題。在製作滾動條之後,淡藍色的圓圈不能拖放到div的右側..我使用z-index但它不起作用..你知道爲什麼..嗎? – paulc1111

0

在div中添加direction: rtl; overflow:scroll;您想要左側的滾動條。

.left{ 
 
    background:grey; 
 
    height:100vh; 
 
    width:200px; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
} 
 
.right{ 
 
    width:200px; 
 
    height:100vh; 
 
    display:inline-block; 
 
    direction: rtl; 
 
    vertical-align:top; 
 
    overflow: scroll; 
 
}
<div class="left"> </div> 
 
<div class="right"> 
 
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p> 
 
</div>

+0

感謝您的回答,我真的很感激它 – paulc1111

0

給出具體的高度ID scrolldiv1。 如果將div放在Bootstrap行類中並放置在列內,會更好。 然後給高度的div。只要數據超過高度,它就會自動添加一個滾動條。

將適用於每個瀏覽器。

+0

感謝您的回答,我真的很感激它 – paulc1111

0

overflow-x: scroll;在CSS將解決您的問題。

爲了保持divs到位,我使用了左窗格div的float: left;

看一看這個簡單的例子:

.left-container { 
 
    width: 30%; 
 
    height: 200px; 
 
    overflow-x: scroll; 
 
    float: left; 
 
}
<div> 
 
    <div class="left-container"> 
 
    Scrollable Left pane 
 
    <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     <li>4</li> 
 
     <li>5</li> 
 
     <li>6</li> 
 
     <li>7</li> 
 
     <li>8</li> 
 
     <li>9</li> 
 
     <li>10</li> 
 
     <li>11</li> 
 
     <li>12</li> 
 
     <li>13</li> 
 
     <li>14</li> 
 
     <li>15</li> 
 
     <li>16</li> 
 
     <li>17</li> 
 
     <li>18</li> 
 
     <li>19</li> 
 
     <li>20</li> 
 
    </ul> 
 
    </div> 
 
    <div> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 

 
    </div> 
 
</div>

+0

感謝您的回答,我真的很感激它 – paulc1111

+0

@ paulc1111 upvote如果它有幫助 – Iceman

0

加 '溢出:汽車' 到左容器,將工作

.left-container { 
width: 30%; 
height: 200px; 
overflow: auto; 
float: left; 
    } 
+0

感謝您的答案!我真的很感激 – paulc1111

+0

@ paulc1111它工作正常嗎? – shyamu

相關問題