javascript - Scroll to the right in element with fixed width and hidden overflow -


I have set up an example that has a fixed-width element with hidden overflow, which scrolls to the right.

HTML & lt; div class = "nowrap" & gt; & Lt; div class = "inner" & gt; Start larger container, fixed width, only one line, scrolls ending when overflow, -------------------------> END & lt; / Div & gt; & Lt; / Div & gt;

css

  body {font-size: 1em; } .nowrap {white-space: nowrap; Hidden flurry; Width: 40 AM; }   

JS

  $ (function () {var $ nowrap = $ ('. nowrap'); var $ inner = $ ('internal. '); Var width = $ inner.width (); $ nowrap.scrollLeft (width);});   

My question:
  1. Is there no way without the need for two types of nested elements, but there is only one element with the same functionality? (Probably with pseudo elements)
  2. Is the element a CSS-only way to show the right end of your content?

    I think what you are trying to achieve, but the other problem For, you can leave the original element and float. The child is right, so it only tells the right end.

    Depending on the stirring elements in your entire project, you may be able to remove the parent element.


    Depending on the basic element, you can use position full for the status of your element (I have removed the parent element in the following demo so that the situation Relative to the viewport).

    CSS Demo 1:

      .nowrap {white-space: nowrap; Hidden flurry; Width: 40 AM; Swim left; }. {Float: right; } HTML Demo 2:  
      & lt; Div class = "inner" & gt; START Large container, fixed width, only one line, scroll to end if overflow occurs, -------------------------> End & lt; / Div & gt;   

    CSS Demo 2: .inner {Status: Completed; Correct: 50%; White-space: Abrop; }

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -