Generate scroll bar for overflow to the left

by

as you have a very specific example will something like this work for you? I did have to use a little jquery (you can do it with javascript). If you don’t have any other content that will be affected you could place a rtl on the HTML tag and keep your absolute position on the element.

if ($("#b").prop('scrollWidth') > $("body").width() ) { //Security Check
  $('html').css('direction', 'rtl');
}
else {
  $('html').css('direction', 'ltr');
}
div.a
{
  position: relative;
  float: right;
  background-color: red;
}
div.b
{
  position: absolute;
  top: 100%;
  right: 100%;
  background-color: blue;
  white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Text1
  <div class="b" id="b">
    Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2
  </div>
</div>

More Related Contents:

  1. CSS margin terror; Margin adds space outside parent element [duplicate]
  2. Make background color extend into overflow area
  3. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
  4. Can specific text character change the line height?
  5. How to display scroll bar onto a html table
  6. CSS margin adds space outside parent element [duplicate]
  7. CSS overflow:hidden with floats
  8. Position absolute and overflow hidden
  9. IE6 + IE7 CSS problem with overflow: hidden; – position: relative; combo
  10. Flexbox affects overflow-wrap behavior
  11. How can I truncate table cells, but fit as much as content possible?
  12. Can overflow:hidden affect layout?
  13. How to prevent text from overflowing in CSS?
  14. How do I remove the horizontal scrollbar in a div?
  15. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  16. How to transform each side of a shape separately?
  17. CSS Inset Borders
  18. Responsive table handling in Twitter Bootstrap
  19. Is it alright to use multiple h1 tags on the same page, but style them differently? [closed]
  20. Using cm/mm on the CSS of a web app that replicates paper interaction is a good practice?
  21. Make flex container take width of content, not width 100%
  22. How to create chat bubbles like facebook Messenger
  23. CSS nth-match doesn’t work
  24. CSS Grid with variable number of “auto” rows, but one row should take “1fr”
  25. Why is my background color not showing if I have display: inline?
  26. When to use CSS positioning?
  27. How to make rounded border in IE8 with CSS?
  28. How to create a ribbon shape in CSS
  29. Markdown and image alignment
  30. CSS – make div’s inherit a height

Leave a Comment