Не могу прокрутить вниз на мобильном телефоне после загрузки секции героя - содержание видимого, но не доступно ⇐ Html

[Anonymous]

Эй, все - я создаю пользовательский веб -сайт и сталкиваюсь с странной проблемой на мобильных устройствах (протестирован на iPhone и Android). < /p>
Проблема < /p>

• Нагрузка страницы - Недостаток и герои. - Вы не можете прокрутить вниз < /li>
  Через несколько секунд прокрутка начинает работать - но пользователи думают, что сайт сломлен до того, как это произойдет < /li>
  < /ul>
  Вот мой индекс. https://github.com/liamkeats/nova-detailing-это репо для моего кода. />https://ubiquitous-cheesecake-f7f10b.netlify.app/
  global.css
  /* GLOBAL RESET AND FONT STACK */
  
  * {
  box-sizing: border-box;
  }
  html,
  body {
  background-color: #000; /* true black if that's what you want */
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  }
  
  @media (max-width: 768px) {
  body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: auto;
  }
  }
  
  /* -----------------------------------
  NAVBAR (Global)
  ------------------------------------ */
  
  .custom-navbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1024px;
  padding: 1.5rem 2rem;
  z-index: 1000;
  background-color: rgba(212, 0, 0, 0.06); /* red-tinted translucent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  }
  
  .nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
  }
  
  /* LOGO LEFT */
  .nav-logo-left {
  display: flex;
  align-items: center;
  }
  
  .nav-logo-left a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border: 3px solid #fff;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease;
  }
  
  .nav-logo-left a::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #d40000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s ease;
  z-index: 0;
  }
  
  .nav-logo-left a:hover::before {
  transform: scaleX(1);
  }
  
  .nav-logo-left img {
  height: 30px;
  position: relative;
  z-index: 2;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
  }
  
  /* NAV LINKS CENTER */
  .nav-center {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  list-style: none;
  margin: -5px;
  padding: 15px;
  width: 100%;
  }
  
  .nav-center li a {
  color: #aaa;
  text-transform: uppercase;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
  }
  
  .nav-center li a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #d40000;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease-in-out;
  }
  
  .nav-center li a:hover {
  color: #fff;
  }
  
  .nav-center li a:hover::after {
  transform: scaleX(1);
  }
  
  /* DROPDOWN */
  
  .nav-center .dropdown {
  position: relative;
  }
  
  .nav-center .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #1a1a1a;
  padding: 0.5rem 0;
  margin: 0;
  list-style: none;
  min-width: 220px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  border-radius: 6px;
  z-index: 999;
  }
  
  .nav-center .dropdown-menu li {
  padding: 0;
  }
  
  .nav-center .dropdown-menu li a {
  display: block;
  padding: 0.75rem 1rem;
  color: #aaa;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.3s ease, color 0.3s ease;
  }
  
  .nav-center .dropdown-menu li a:hover {
  background-color: #d40000;
  color: white
  }
  
  .nav-center .dropdown:hover .dropdown-menu {
  display: block;
  }
  
  /* SOCIAL ICONS RIGHT */
  .nav-right {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  }
  
  .nav-right img {
  height: 30px;
  transition: opacity 0.2s ease;
  }
  
  .nav-right a:hover img {
  opacity: 0.7;
  }
  
  /* HAMBURGER (initially hidden) */
  .hamburger.uk-navbar-toggle {
  display: none;
  color: #fff;
  padding: 0.5rem;
  }
  
  /* RESPONSIVE NAVIGATION */
  @media (max-width: 1024px) {
  .custom-navbar {
  left: 0;
  transform: none;
  top: 0;
  width: 100%;
  border-radius: 0;
  border-left: none;
  border-right: none;
  }
  
  .nav-center {
  gap: clamp(1rem, 3vw, 3rem);
  }
  
  .nav-center li a {
  font-size: clamp(12px, 1.5vw, 14px);
  }
  }
  
  @media (max-width: 768px) {
  .nav-center,
  .nav-right {
  display: none;
  }
  
  .hamburger.uk-navbar-toggle {
  display: block;
  margin-left: auto;
  font-size: 1.5rem;
  color: white;
  cursor: pointer;
  }
  }
  .uk-offcanvas-page {
  overflow: visible !important;
  }
  
  /* Match offcanvas text style to navbar */
  .uk-offcanvas-bar {
  background-color: #111; /* match your navbar bg */
  }
  
  .uk-offcanvas-bar .uk-nav li a {
  color: #aaa;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.75rem 0;
  text-decoration: none;
  display: block;
  transition: color 0.2s ease;
  }
  
  .uk-offcanvas-bar .uk-nav li a:hover {
  color: #fff;
  }
  
  /* Optional: underline-style hover like navbar */
  .uk-offcanvas-bar .uk-nav li a::after {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background-color: #d40000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease-in-out;
  margin-top: 4px;
  }
  
  .uk-offcanvas-bar .uk-nav li a:hover::after {
  transform: scaleX(1);
  }
  
  < /code>
  home.css
  /* -----------------------------------
  HERO SECTION
  ------------------------------------ */
  
  .hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  }
  
  .hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  z-index: 0; /* don’t use -1 */
  filter: brightness(0.6);
  pointer-events: none; /* avoids accidental interaction on mobile */
  }
  
  .hero-content {
  position: absolute;
  bottom: 10%; /* adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  max-width: 800px;
  padding: 2rem;
  text-align: center;
  }
  
  .hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(to bottom, transparent, #000);
  z-index: 1;
  pointer-events: none;
  }
  
  @media (max-width: 768px) {
  .hero-video {
  display: none;
  }
  .hero{
  background: url(/assets/images/hero-fallback.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }
  }
  /* -----------------------------------
  CHAT NOW BUTTON - header styll
  ------------------------------------ */
  
  .chat-button {
  position: relative;
  display: inline-block;
  padding: 1rem 2.5rem;
  background-color: transparent;
  color: white;
  text-decoration: none;
  border: 2px solid white;
  border-radius: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.075rem;
  overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease;
  z-index: 1;
  }
  
  .chat-button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background-color: #8d0505;
  z-index: -1;
  transition: width 0.3s ease;
  }
  
  .chat-button:hover::before {
  width: 100%;
  }
  
  .chat-button:hover {
  color: white;
  border-color: #7a0606;
  cursor: pointer;
  }
  
  /* -----------------------------------
  Services - main - section 1
  ------------------------------------ */
  
  .services {
  background-color: #000000;
  padding: 6rem 2rem;
  text-align: center;
  }
  
  .section-title {
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 3rem;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  color: white;
  position: relative;
  display: inline-block;
  transition: opacity 2.5s ease, transform 2.5s ease;
  opacity: 0;
  transform: translateY(20px);
  }
  
  .section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background-color: #d40000;
  border-radius: 2px;
  }
  
  .section-title.visible {
  opacity: 1;
  transform: translateY(0);
  }
  
  .services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* force 2 per row */
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  }
  
  @media (max-width: 768px) {
  .services-grid {
  grid-template-columns: 1fr; /* stack 1 per row on mobile */
  }
  }
  
  .service-card {
  background-color: #350404;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  }
  
  .service-card:hover {
  transform: translateY(-10px);
  box-shadow:
  0 0 10px rgba(212, 0, 0, 0.4),
  0 0 25px rgba(212, 0, 0, 0.3),
  0 0 40px rgba(212, 0, 0, 0.2);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  }
  
  .service-info {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  }
  
  .service-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  }
  
  .service-card h3 {
  margin: 0;
  font-size: 1.3rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
  }
  
  .service-card p {
  margin: 0;
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.4;
  }
  
  @media (min-width: 768px) and (max-width: 1024px) {
  .service-info {
  padding: 1rem 1rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  }
  }
  
  /* -----------------------------------
  WHY US - main - section 2
  ------------------------------------ */
  
  .why-us-section {
  background-color: #000;
  padding: 8rem 2rem;
  position: relative;
  }
  
  .why-us-container {
  position: relative;
  max-width: 1200px;
  margin: -100px auto;
  }
  
  .why-us-image-container {
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 0;
  overflow: hidden; /* ensures gradient doesn't get clipped weirdly */
  }
  
  .why-us-image-container img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
  
  /* Fade in/out on both sides */
  -webkit-mask-image: linear-gradient(
  to left,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 1) 15%,
  rgba(0, 0, 0, 1) 85%,
  rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
  to right,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 1) 15%,
  rgba(0, 0, 0, 1) 85%,
  rgba(0, 0, 0, 0) 100%
  );
  
  /* Required to apply the mask fully */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  }
  
  @keyframes softPulse {
  0% { box-shadow: 0 0 20px rgba(212, 0, 0, 0.3); }
  50% { box-shadow: 0 0 30px rgba(212, 0, 0, 0.6); }
  100% { box-shadow: 0 0 20px rgba(212, 0, 0, 0.3); }
  }
  
  .why-us-grid-wrapper {
  background: #2d0000; /* muted dark red */
  border-radius: 12px;
  color: white;
  padding: 3rem;
  box-shadow: 0 0 30px rgba(212, 0, 0, 0.4); /* soft red glow */
  position: relative;
  z-index: 1;
  margin-top: -125px;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
  animation: softPulse 4s infinite;
  }
  
  @media (max-width: 768px) {
  .why-us-grid-wrapper {
  margin-top: -56px; /* removes the overlap on mobile */
  padding-top: 3rem; /* add breathing room if needed */
  }
  
  .why-us-image-container {
  margin-bottom: -1rem; /* optional — reduce extra spacing */
  }
  
  .why-us-image-container img {
  max-width: 90%;
  }
  }
  
  .why-us-heading {
  font-size: 2.5rem;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  color: white;
  margin-bottom: 2rem;
  line-height: 1.2;
  }
  
  .why-us-heading span {
  background-color: white;
  color: #d40000;
  padding: 0 0.4rem;
  border-radius: 4px;
  }
  
  .why-us-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  }
  
  .why-block h3 {
  color: white;
  font-size: 1.3rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
  }
  
  .why-block p {
  color: #eee;
  font-size: 0.95rem;
  line-height: 1.5;
  }
  
  @media (max-width: 900px) {
  .why-us-container {
  flex-direction: column;
  }
  
  .why-us-grid {
  grid-template-columns: 1fr;
  }
  
  .why-us-grid-wrapper {
  padding: 2rem;
  }
  }
  
  /* -----------------------------------
  CONTACT US - main - section 4
  ------------------------------------ */
  
  .contact-us {
  background-color: #000;
  padding: 6rem 2rem;
  text-align: center;
  color: white;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .contact-us.visible {
  opacity: 1;
  transform: translateY(0);
  }
  
  .contact-overlay {
  background-color: rgba(0, 0, 0, 0.5); /* optional dark overlay */
  padding: 3rem 2rem;
  border-radius: 12px;
  display: inline-block;
  max-width: 600px;
  margin: 0 auto;
  }
  
  .contact-overlay h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  }
  
  .book-heading {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 2rem;
  }
  
  .cta-button {
  display: inline-block;
  padding: 1.2rem 3rem;
  background-color: transparent;
  color: white;
  font-weight: bold;
  font-size: 1.1rem;
  border: 2px solid #d40000;
  border-radius: 50px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  z-index: 1;
  }
  
  .cta-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(120deg, transparent, #d40000 50%, transparent);
  transition: all 0.6s ease;
  z-index: -1;
  }
  
  .cta-button:hover::before {
  left: 0;
  }
  
  .cta-button:hover {
  color: white;
  border-color: #ff1a1a;
  box-shadow: 0 0 20px #d40000;
  transform: scale(1.03);
  }
  
  @keyframes fadeUp {
  to {
  opacity: 1;
  transform: translateY(0);
  }
  }
  < /code>
  index.html
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Home
• About Us
• Services
  
  Detailing
• Vehicle Protection
• Paint Correction
• New Vehicle Detailing

[*]Service Area
[*]Reviews
[*]Gallery
[*]Contact




















[url=sms:+1234567890]Chat Now[/url]






Our Services




Detailing
Detailing isn’t just cleaning—it’s restoring. We go beyond the surface with deep interior care, precise hand washes, and premium products that respect your vehicle’s finish. Whether it’s your daily driver or weekend pride, we treat every car like it’s our own.





Vehicle Protection
Your car faces wear the moment it hits the road. Our protection packages, including ceramic coatings and precision-cut paint protection film, guard your vehicle against chips, UV damage, and the elements—without compromising its look.





Paint Correction
Scratches, swirl marks, dullness—gone. Our paint correction service brings out the true clarity and depth of your paint through careful, multi-stage polishing. If your car’s finish isn’t turning heads, we’ll make sure it does.





New Vehicle Detailing
That “new car” feeling should last. We prep brand new vehicles with protective coatings and dialed-in finishes to fix factory mishaps and prevent early wear. It’s the perfect first step for long-term care and lasting shine.










WHY
CHOOSE US?


Premium Results. Every Time.
At Nova Detailing, we treat every vehicle like a high-end showpiece. From daily drivers to luxury cars, our mobile auto detailing services in Kentville and across the Annapolis Valley are delivered with unmatched precision and pride.

Certified Expertise You Can Count On
We’re fully insured, experienced, and specialize in paint correction and ceramic coatings. Locals in Nova Scotia trust us because we deliver consistent, high-quality results — every single time.

Detailing Built Around You
No two vehicles are the same. Whether you need interior shampooing, exterior polishing, or a full detail package, we tailor our services to your needs — right at your home or business in the Valley.

Cutting-Edge Products. Local Service.
We stay ahead of the curve with the latest products and techniques in automotive detailing. From PPF to advanced ceramic coating, we bring big-city quality to Kentville and beyond — without the big-city hassle.









Ready to book?
[url=sms:+1234567890]Contact Us[/url]






© 2025 Nova Detailing. All rights reserved.

• Home
• About Us
• Services
  
  Detailing
• Vehicle Protection
• Paint Correction
• New Vehicle Detailing

[*]Service Area
[*]Reviews
[*]Gallery
[*]Contact






document.addEventListener("DOMContentLoaded", () => {
const contactSection = document.querySelector('.contact-us');

const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
contactSection.classList.add('visible');
}
});
}, { threshold: 0.2 });

observer.observe(contactSection);
});


document.addEventListener("DOMContentLoaded", () => {
const sectionTitle = document.querySelector('.section-title');

const titleObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
sectionTitle.classList.add('visible');
} else {
sectionTitle.classList.remove('visible'); // remove it when out of view
}
});
}, { threshold: 0.2 });

if (sectionTitle) {
titleObserver.observe(sectionTitle);
}
});




< /code>
Кроме того, если у вас, ребята, есть какие -либо предложения о коде, также будут больными. Я новичок в создании веб -сайтов, и я просто делаю это для своей собственной компании LOL. Заранее спасибо за помощь. < /P>
лучше всего, < /p>
l < /p>
Что я пробовал < /p>

• Удал большую краю с. Hero-content < /li>
  Заменил высота: 100V. Указательные события: нет слоев видео
• Удаленный переполнение: скрыто от .hero и родительских контейнеров
• Добавлено -Webkit-overflow-scollling: прикосновение к мобильному
• . Элементы
• Предварительно загруженные CSS/шрифты и использовали preLoad = "none" для видео героя

Я попробовал все это. Сначала я думал, что страница не загружалась достаточно быстро, поэтому я попытался предварительно загружать вещи. Я тогда, хотя, возможно, наложение на содержание героя, которое у меня был, занимал слишком много места или что -то в этом роде, или накладывался в другой раздел и испортил загрузку. Затем я также удалил все это. Затем я понял, что все загружается, но я просто заблокирован. Итак, я посмотрел некоторые вещи с помощью веб -прокрутки, я посмотрел несколько видео о том, как их реализовать, ничего не сработало, и я действительно потерян.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... -but-not-a