0

I have this that is width:100%;. On bottom i have horizontal scrollbar. What i want is to scrollbar have width: 60% and float:right; .Any suggestion how can i do that?

<div style="width:100%;overflow-x:scroll">
 content
</div>

So right now scrollbar is over all div and i want to have only half of it and to be on right side. I want to use only css, and not jquery because im using angular. So how can i do that?

None
  • 8,817
  • 26
  • 96
  • 171
  • please upload your mock-up image.. – veera Sep 04 '17 at 09:17
  • 1
    You want scrollbar to be not the same size as scrolling container? No way. This effect could only be simulated by creating additional element with scroll. All relations (scrolling pseudo scroll should trigger scrolling in original block) need JS. Also this will impact performance a lot. – Anarion Sep 04 '17 at 09:17

3 Answers3

0

You can set the width of your scrollbar by setting the width of your div to 60%.

.scroll{
  width:60%;
  overflow-x:scroll
}
<div class="scroll">
<p>
  content
</p>
</div>
bhansa
  • 7,282
  • 3
  • 30
  • 55
0

i don't think u can do that with pure css , u can inject jQuery easy if u r using bundle tool like webpack2

andrew s zachary
  • 167
  • 2
  • 14
0

I have used two div Just try this:-

.scroll{
  width:60%;
  overflow-x:scroll
}
<div class="col-md-12" style="display:flex; justify-content:center;">
<div class="scroll col-md-10">
<p>
  content
</p>
</div>
</div>
R. Mani Selvam
  • 320
  • 8
  • 36