Please help me understand the following problem. Trying to create a parallax effect on css. It seems that everything was achieved, one appears an additional scroll. Found it in the network that it can be removed using such a piece of code

* { margin:0; padding:0; }

It really helped, but I can not understand how resetting indents removes the scroll? Can someone explain this point? There is also a second point, when adding more content to the code, the scroll appears again.

 * { margin: 0; padding: 0; } .wraper { perspective: 1px; transform-style: preserve-3d; overflow-y: scroll; overflow-x: hidden; } .content { min-height: 100vh; transform-style: preserve-3d; width: 100%; } .content::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; min-height: 100%; background-image: url(https://picua.org/images/2018/11/17/560b24bae099abf1bacdbafb162d62b2.jpg); /*background-color: #f10000;*/ background-repeat: no-repeat; background-size: cover; transform: translateZ(-1px) scale(2); } .content h1 { /*margin-top: 400px;*/ display: flex; align-items: flex-end; padding-top: 140px; } 
 <div class="wraper"> <div class="content"> <h1>заголовок</h1> </div> </div> <div class="wraper"> <div class="content"> <h1>заголовок</h1> </div> </div>

If in this code to uncomment additional content appears scroll. Adding the html tag to overflow:hidden properties does not help as the rest of the page stops scrolling. Please tell me how you can hide the scroll so that the parallax effect remains and if anyone knows, tell me on the first question (about resetting indents). Thank you very much in advance

  • Yes. what's on the toaster doesn't suit me. I wrote about the fact that the html add overflow: hidden does not fit and there is not any parallax, just a fixed block. - Alexey Bilenko
  • You are better in the matter describe what you want to achieve, so to speak the final result. - Air
  • one
    codepen.io/keithclark/pen/JycFw like this? - MaximLensky

1 answer 1

Try to hide the scrollbar with css. Detailed description here .

You can use the -webkit-scrollbar pseudo-element for this :

There are exceptions not supported by Mozilla Firefox

 ::-webkit-scrollbar { width: 0px; }
  • The FF does not support - Air
  • Yaroslav, thank you very much for the advice, but as far as I understand, this solution is not cross-browser. but thanks anyway - Alexey Bilenko