Question

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

我还需要五个div才能从页面底部的一个滚动条控制水平滚动。（Div＃＃，＃two，＃three，＃four和#custTimeline）我不想要每个客户div的滚动条。

＆＃13;

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();

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

由于#cust1的宽度为1500像素，因此仅当内容比此内容更宽时才会显示滚动，目前只有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);
    });
});

滚动条手柄不可见

1 个答案: