javascript - 滚动条句柄不可见

Question

滚动条句柄在我的页面中不可见。我已尝试将 overflow-x 设置为自动并滚动 #cust1 和 #cust2 div。

我还需要五个 div，以便仅通过页面底部的一个滚动条来控制它们的水平滚动。 (Div 的#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);
    });
});