>source

code 아래에 가능한 솔루션으로 수정

사이트에 전체 페이지 동영상이 있습니다.

스크롤 작업: 상단에서 250px 이하에 있는 콘텐츠를 표시하지 않도록 하여 비디오 상단의 250px가 항상 표시되도록 합니다.

이를 이해하는 더 좋은 방법은 투명한 아래에 콘텐츠를 숨기는 것입니다.div. 그러나 첫 번째 설명이 code와 더 관련이 있다고 생각합니다.

두 번째 설명은 수많은 질문과 반답으로 이어집니다. 그러나 그들 중 누구도 내 문제를 해결하지 못합니다.

다음은 많은 내용을 다루는 답이 없는 질문입니다.

스크롤 막대를 전체 높이로 설정하고 싶습니다.

이것이 힌트가 될 수 있습니다.
이 code는 콘텐츠 위치를 감지할 수 있습니다. 이제 이 상위 오버플로를 숨깁니다.

데모
http://jsfiddle.net/4TgmF/

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.p>

CSS

* { margin:0; }
html, body {
  width:100%;
  height:100%;
}
#header {
    width:100%;
    height:100%;
}
#bgvid {
    position:fixed;
    z-index:-1000;
    width:auto;
    height:auto;
    min-width:100%;
    min-height:100%;
}
#visible_part {
    position:fixed;
    height:250px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    color:#fff;
    background:rgba(0,0,0,0.1);
}
#content {
    width:100%;
    min-height:100%;
    background:#fafafa;
}

수정
Gajus Kuizinas는 댓글에서 배경을 복제하고 이를 마스크로 사용하도록 제안했는데 실제로 문제가 해결되지는 않았지만 그는 저를 생각하게 만들었습니다(고맙습니다). 여기서 키워드는 마스크입니다. 이에 대한 좋은 기사를 찾았습니다. http://thenittygritty.co/css-masking나는 이것이 훌륭한 해결책이 될 수 있다고 생각합니다. 마스크는위치: 고정;,상단:250px;,높이: 100%;(-250픽셀). 유일한 문제는 고정 위치와 스크롤 가능한 내용으로 마스크를 수행하는 방법을 알 수 없다는 것입니다. 무슨 말인지 알 수 있니?

마스크처럼 사용하려는 컨테이너에 동일한 배경을 복제하면 됩니다. jsfiddle.net/4TgmF/1. 내가 질문을 잘못 이해하지 않는 한.

Gajus2021-11-26 10:43:24

@Gajus 질문을 제대로 이해하신 것 같습니다. 문제는 사이트의 배경이 탄탄하지 않고 원래 배경과 어울리지 않는다는 점입니다. 더군다나 배경이 영상이라 맞추기가 더 어렵네요. 감사 해요.

Jon Desle2021-11-26 10:43:24

배경에 이미지를 사용하는 것을 고려하시겠습니까?

web-tiki2021-11-26 10:43:24

이것은 큰 문제이지만, 표현은 약간 해결될 수 있습니다. 당신이 제공한 것에서 당신이 원하는 것을 말하기는 정말 어렵습니다. 기본적으로 콘텐츠 상단의 250px가 보이지 않게 하거나 그런 식으로 나타나도록 하여 기본 스크롤을 사용하면서 전체 화면 배경 비디오의 250px를 계속 볼 수 있습니다. 맞죠?

sheriffderek2021-11-26 10:43:24

5개 브라우저 모두에서 작동하는 더 나은 솔루션을 찾았습니다... 여기에 설명과 code가 포함된 답변이 있습니다.

Trevin Avery2021-11-26 10:43:24

안타깝게도 배경은 비디오여야 합니다.

Jon Desle2021-11-26 10:43:24
  • 이전 reactjs : useRef Div 너비 변경 시 UI 업데이트
  • 다음 function : PowerShell 기능을 종료하고 스크립트를 계속하십시오.