滚动条手柄不可见

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

我还需要五个div来从页面底部的一个滚动条控制水平滚动。（Div's #one，#two，#three，#four和#custTimeline）我不想为每个客户div分配滚动条。

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>

来源

2017-01-29 mike

由于#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); 
    }); 
});

来源

2017-01-30 00:19:47 LGSon

绿色区域是到达时间指标，他们应该是狭窄的。＃cust1和＃cust2 div的设置为1500px，每个应该强制滚动条但不起作用。 – mike

@mike这不是滚动条的工作方式......因为＃cust1和＃cust2具有'verflow：auto'，当它们的_content_大于它们的宽度时，它们会滚动（活动滚动条），而不是因为它们本身宽于视口......这就是为什么我将它们设置为“100vh”并且使内容更宽，以便您了解其工作原理 – LGSon

谢谢，我明白了。我通过在“cust1”和“cust2”内创建了另一个长div，称为“filler1”和“filler2”，并将其不透明度设置为0. [jsfiddle]（https://jsfiddle.net/r0zcz8q5/）我的问题的其他部分，我怎样才能使“custTimeline”控件的“cust1”和“cust2”的滚动条？ – mike

滚动条手柄不可见

回答

相关问题