Databases
StackOverflow2013
Postsdbo
POAvoid container's overflow scrollbars with "enter from side" effect
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAvoid container's overflow scrollbars with "enter from side" effect
    primarykey
    data
    text
    <p>I'm working on a one/single page scroll website. I have a couple of sections each one containing 2 columns and I'm trying to make them to enter from the left/right with a fade effect. I'm using CSS transforms and jquery to activate the effect only when the user scrolls and reachs its corresponding section. Here's an example: <a href="http://jsfiddle.net/Rv35g/" rel="nofollow">http://jsfiddle.net/Rv35g/</a> (Resize your window so it fits the container's width)</p> <p>HTML:</p> <pre><code>&lt;div class="container animation-init"&gt; &lt;div class="left"&gt;Column 1&lt;/div&gt; &lt;div class="right"&gt;Column 2&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>body, html{ margin: 0; height: 100%; } .container{ width: 600px; height: 100%; margin: 0 auto; background: green; } .container .left, .container .right{ width: 50%; float: left; color: white; height: 100%; } .container .left{ background: red; } .container .right{ background: blue; } .container.animation-init .left, .container.animation-init .right{ opacity: 0; } .container.animation-init .left{ -webkit-transform: translate(-80px, 0); -moz-transform: translate(-80px, 0); transform: translate(-80px, 0); } .container.animation-init .right{ -webkit-transform: translate(80px, 0); -moz-transform: translate(80px, 0); transform: translate(80px, 0); } .container.animation-init.animation-ready .left, .container.animation-init.animation-ready .right{ opacity: 1; -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 1s; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); transform: translate(0, 0); } </code></pre> <p>JS:</p> <pre><code>$(function() { $('.container').addClass('animation-ready'); }); </code></pre> <p>The problem is that when my columns are on its initial position they generate horizontal scrollbars because they're going outside the container... Do you have any idea on how could I handle this? I can't use overflow: hidden; cause I'll be cutting part of the animation. I also tried to put overflow-x: hidden; to the html tag but since the effects only activate when you reach its corresponding section the overflow stills being a problem specially on mobile devices...</p> <p>EDIT: The problem with overflow-x: hidden is that the extra space stills there, so when scrolling with your finger or mousewheel-click arrow function it's possible for you to end up in one of those blank spaces losing the center of the page. Also, in mobile devices, it takes this overflow as part of the general width, so If I have and element coming from -200px to the left, it'll show the container's width + the aditional 200. That's a problem, specially when it comes to the elements positioned at the bottom of the page, cause they're on their init position waiting for you to reach them to start the animation. In the example I posted the overflow disappears almost instantly cause the animation is being triggered automatically, but as I told you at the begining, I have multiple sections where the column's animation starts only if you reach their parent sections.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USenzo
    1. USenzo
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POAvoid container's overflow scrollbars with "enter from side" effect
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI don't see any scrollbars in Chrome...
      singulars
      1. POAvoid container's overflow scrollbars with "enter from side" effect
      1. USelclanrs
    2. COI'm sorry, it was hard to reproduce it in the example... If you adjust your window to fit the container's width you'll see it.
      singulars
      1. POAvoid container's overflow scrollbars with "enter from side" effect
      1. USenzo
    3. COI see now, I tried the `overflow-x:hidden` and it works in Chrome and FF. What issues did you have on mobile exactly?
      singulars
      1. POAvoid container's overflow scrollbars with "enter from side" effect
      1. USelclanrs
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload