滾動條手柄不可見

Question

滾動條手柄在我的頁面中不可見。我試着將overflow-x設置爲自動並滾動＃cust1和＃cust2 div。

我還需要五個div來從頁面底部的一個滾動條控制水平滾動。 （Div's #one，#two，#three，#four和#custTimeline）我不想爲每個客戶div分配滾動條。

請幫忙。 https://jsfiddle.net/c71ytuxz/1/

var c = document.getElementById("custTimeline"); 
 
var ctx = c.getContext("2d"); 
 
ctx.font = "20px Georgia"; 
 
ctx.save(); 
 
ctx.rotate(-90*Math.PI/180); 
 

 
var baseLoc = 130; 
 
var hours = ["5AM","6AM", "7AM","8AM","9AM","10AM","11AM","12 NOON","1PM","2PM","3PM","4PM","5PM","6PM", "7PM", "8PM", "9PM", "10PM", "11PM", "12PM"]; 
 

 
for(i = 0; i < hours.length; i++) { 
 
    if (i == 0) { 
 
    ctx.fillText(hours[i], -120, baseLoc); 
 
    } 
 
    else { 
 
    baseLoc += 90; 
 
    ctx.fillText(hours[i], -120, baseLoc); 
 
    } 
 
} 
 
ctx.restore();

#header { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: lightgrey; 
 
} 
 
#cust1 { 
 
    position: fixed; 
 
    left: 0px; 
 
    top: 160px; 
 
    width: 1500px; 
 
    height: 150px; 
 
    background: lightgrey; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    margin-bottom: 10px; 
 
} 
 
#one { 
 
    width: 8%; 
 
    height: 150px; 
 
    background: darkgrey; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
#two { 
 
    margin-left: 25%; 
 
    width: 35px; 
 
    height: 150px; 
 
    background: green; 
 
} 
 

 
#cust2 { 
 
    position: fixed; 
 
    top: 320px; 
 
    left: 0px; 
 
    width: 1500px; 
 
    height: 150px; 
 
    background: lightgrey; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
} 
 
#three { 
 
    width: 8%; 
 
    height: 150px; 
 
    background: darkgrey; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
#four { 
 
    margin-left: 15%; 
 
    width: 35px; 
 
    height: 150px; 
 
    background: green; 
 
}

<canvas id="custTimeline" 
 
    width = "1900" 
 
    height = "130" 
 
    style = "border:3px solid #aaaaaa;"> 
 
</canvas> 
 

 
<div id="cust1"> 
 
    <div id="one"><p> 
 
    Customer 1 
 
    </p></div> 
 
    <div id="two"></div> 
 
</div> 
 

 
<div id="cust2"> 
 
    <div id="three"><p> 
 
    Customer 2 
 
    </p></div> 
 
    <div id="four"></div> 
 
</div>

Answer 1

由於#cust1具有1500px的寬度，當其含量變得比更寬，並且在目前它是隻有8％（#one）+ 25的滾動將只出現％+ 35px（#two）。

如果你想讓它滾動，這

#cust1 { 
    position: fixed; 
    left: 0px; 
    top: 160px; 
    width: 100vw;     /* changed property */ 
    height: 150px; 
    background: lightgrey; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    margin-bottom: 10px; 
} 
#two { 
    margin-left: 25%; 
    width: 1000px;     /* changed property */ 
    height: 150px; 
    background: green; 
} 

Updated fiddle

---

基於評論

更新到有另外一條滾動更新，這裏是一個辦法，用改變jQuery的。

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     var position = $(this).scrollLeft(); 
     $("#first").scrollLeft(position); 
     $("#second").scrollLeft(position); 
    }); 
});