我如何在 React.js 中使用 overflow:hidden 和 position:sticky

Question

I have been trying to use overflow:hidden because the navbar I created seem to be creating a White space on the right of my webpage. I have used Header component to create the navbar. I also wanted the navbar to be position: sticky. I found out I can use either but not both. Is there any way around this?

Answer 1

Unfortunately this has nothing to do with React. It's just a css problem. You cannot use position: sticky inside a overflow: hidden .
(see: https://github.com/w3c/csswg-drafts/issues/865 )

If you want that effect, you'll need to use a sticky js library (such as http://stickyjs.com/ ), or calculate the position on your own (with position: fixed or position: absolute ).

The good news is that you probably don't need that overflow: hidden . If there's a space on the right, it's just an element overflowing, so you should address only that element and not the whole container. (It's usualy margin,elements with fixed width or elements with position absolute outside the viewport)

Answer 2

Try this first. Becaue you dont know the gap between the sticky element and viewport boundary, you may insert his in your css rule:

element {
overflow: hidden;
position: sticky;
top: 0; // this will get rid of gap
}

You can alternatively use following. You might have space because you have given dynamic width and maybe you have padding, margin etc defined as well. If you had posted code snippet it would have helped better but I had done my styling with followings. flex-root being used as display had helped as well. Only try if above way doesnt work.

  //  Try CSS attributes:
element {
word-break: break-word;
}

// if you have padding which is creating white space:
element {
width: auto;
padding: 0;
word-break: break-word;
}
// Try this as well
element {
display: flex-root;
}

// display flex guidelines:
// https://developer.mozilla.org/en-US/docs/Web/CSS/display
// The element generates a block element box that establishes a new block formatting 


----------


context, defining where the formatting root lies