웹 프론트엔드 JS 튜토리얼 모바일 단말기의 콘텐츠 영역 스크롤에 대한 예제 튜토리얼

모바일 단말기의 콘텐츠 영역 스크롤에 대한 예제 튜토리얼

Jun 26, 2017 am 10:23 AM
관행 콘텐츠 영역 스크롤 이동하다

自己的总结的一些方法,如果有什么新的好的方法希望能够交流:

      1.给定位(导航栏)(底部)

        nav{

          position:fixed;

          top:0rem;

        };

        footer{

                         position:fixed;

         bottom:0rem;

        };

但是这个方法会有弊端,在你给nav设置定位时,内容区域就会顶头出现,就需要给内容区域设置定位设置top值nav的高度方可。

2.使用IScroll插件。

   例如:   

      













  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域

  • 我是内容区域





底부분




3.第三 第三 第三 种 那 ■ : 弊端 (会 改变 改变 nav 的 的 高度 高度 高度 高度



& lt;! doctype html & gt;
& lt; html & gt;
& gt;








  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域


  • 内容区域

  • 内容区域

  • 内容区域

  • 内容区域< /li>
  • 内容区域



底부분



  

如果还有其他好的方法,希望能一起交流;

위 내용은 모바일 단말기의 콘텐츠 영역 스크롤에 대한 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

appdata 폴더를 D 드라이브로 옮길 수 있나요? appdata 폴더를 D 드라이브로 옮길 수 있나요? Feb 18, 2024 pm 01:20 PM

appdata 폴더를 D 드라이브로 이동할 수 있나요? 컴퓨터 사용이 늘어나면서 점점 더 많은 사용자의 개인 데이터와 애플리케이션이 컴퓨터에 저장됩니다. Windows 운영 체제에는 사용자의 애플리케이션 데이터를 저장하는 데 사용되는 appdata 폴더라는 특정 폴더가 있습니다. 많은 사용자들은 데이터 관리 및 보안 고려 사항을 위해 이 폴더를 D 드라이브나 다른 디스크로 이동할 수 있는지 궁금해합니다. 이번 글에서는 이 문제에 대해 논의하고 몇 가지 해결책을 제시하겠습니다. 먼저, 나에게

iPhone에서 민감한 콘텐츠 경고를 활성화하고 해당 기능에 대해 알아보는 방법 iPhone에서 민감한 콘텐츠 경고를 활성화하고 해당 기능에 대해 알아보는 방법 Sep 22, 2023 pm 12:41 PM

특히 지난 10년 동안 모바일 장치는 친구 및 가족과 콘텐츠를 공유하는 주요 방법이 되었습니다. 접근하기 쉽고 사용하기 쉬운 인터페이스와 실시간으로 이미지 및 비디오를 캡처할 수 있는 기능은 콘텐츠 제작 및 공유를 위한 탁월한 선택입니다. 그러나 악의적인 사용자가 이러한 도구를 악용하여 보기에 적합하지 않고 사용자의 동의가 필요하지 않은 원치 않는 민감한 콘텐츠를 전달하기 쉽습니다. 이러한 일이 발생하지 않도록 iOS17에는 "민감한 콘텐츠 경고"라는 새로운 기능이 도입되었습니다. 이에 대해 살펴보고 iPhone에서 사용하는 방법을 살펴보겠습니다. 새로운 민감한 콘텐츠 경고는 무엇이며 어떻게 작동하나요? 위에서 언급한 것처럼 민감한 콘텐츠 경고는 사용자가 iPhone을 포함한 민감한 콘텐츠를 보지 못하도록 설계된 새로운 개인 정보 보호 및 보안 기능입니다.

360 탐색으로 열리도록 Microsoft Edge 브라우저를 변경하는 방법 - 360 탐색으로 열기를 변경하는 방법 360 탐색으로 열리도록 Microsoft Edge 브라우저를 변경하는 방법 - 360 탐색으로 열기를 변경하는 방법 Mar 04, 2024 pm 01:50 PM

Microsoft Edge 브라우저에서 360 탐색 페이지를 여는 페이지를 변경하는 방법은 실제로 매우 간단하므로 이제 Microsoft Edge에서 360 탐색 페이지를 여는 페이지를 변경하는 방법을 공유하겠습니다. 브라우저가 필요한 친구가 모두를 도울 수 있기를 바랍니다. Microsoft Edge 브라우저를 엽니다. 아래와 같은 페이지가 보입니다. 오른쪽 상단에 있는 점 3개 아이콘을 클릭하세요. '설정'을 클릭하세요. 설정 페이지의 왼쪽 열에서 "시작 시"를 클릭하세요. 오른쪽 열의 그림에 표시된 세 지점을 클릭한 다음("새 탭 열기"를 클릭하지 마세요), 편집을 클릭하고 URL을 "0"(또는 기타 의미 없는 숫자)으로 변경하세요. 그런 다음 "저장"을 클릭하세요. 다음으로 '를 선택하세요.

6000mAh 실리콘 음극 배터리! Xiaomi 15Pro 업그레이드가 다시 유출되었습니다. 6000mAh 실리콘 음극 배터리! Xiaomi 15Pro 업그레이드가 다시 유출되었습니다. Jul 24, 2024 pm 12:45 PM

7월 23일 뉴스에 따르면 블로거 Digital Chat Station은 Xiaomi 15 Pro의 배터리 용량이 6000mAh로 증가하고 90W 유선 플래시 충전을 지원한다는 소식을 전했습니다. 이는 Xiaomi 디지털 시리즈 중 가장 큰 배터리를 탑재한 Pro 모델이 될 것입니다. Digital Chat Station은 이전에 Xiaomi 15Pro의 배터리가 초고에너지 밀도를 가지며 실리콘 함량이 경쟁 제품보다 훨씬 높다고 밝혔습니다. 2023년 실리콘 기반 배터리가 대규모로 테스트된 후, 2세대 실리콘 양극 배터리가 업계의 미래 발전 방향으로 확인되어 올해 직접 경쟁의 정점을 맞이할 것입니다. 1. 실리콘의 이론적인 그램 용량은 4200mAh/g에 도달할 수 있으며 이는 흑연의 그램 용량의 10배 이상입니다(흑연의 이론적인 그램 용량은 372mAh/g입니다). 음극의 경우 리튬이온 삽입량이 최대에 도달했을 때의 용량이 이론 그램 용량으로 동일 중량 하에서

Windows 11에서 이 PC가 모바일 장치에 액세스하도록 중지하거나 허용하세요. Windows 11에서 이 PC가 모바일 장치에 액세스하도록 중지하거나 허용하세요. Feb 19, 2024 am 11:45 AM

Microsoft는 최신 Windows 11 버전에서 PhoneLink의 이름을 MobileDevice로 변경했습니다. 이 변경을 통해 사용자는 프롬프트를 통해 모바일 장치에 대한 컴퓨터 액세스를 제어할 수 있습니다. 이 문서에서는 모바일 장치의 액세스를 허용하거나 거부하는 컴퓨터 설정을 관리하는 방법을 설명합니다. 이 기능을 사용하면 모바일 장치를 구성하고 컴퓨터에 연결하여 문자 메시지를 보내고 받고, 모바일 애플리케이션을 제어하고, 연락처를 보고, 전화를 걸고, 갤러리를 보는 등의 작업을 수행할 수 있습니다. 휴대폰을 PC에 연결하는 것이 좋은 생각입니까? 휴대폰을 Windows PC에 연결하는 것은 편리한 옵션이므로 기능과 미디어를 쉽게 전송할 수 있습니다. 모바일 장치를 사용할 수 없을 때 컴퓨터를 사용해야 하는 사람들에게 유용합니다.

JavaScript에서 지정된 요소 위치로 스크롤을 구현하는 방법은 무엇입니까? JavaScript에서 지정된 요소 위치로 스크롤을 구현하는 방법은 무엇입니까? Oct 22, 2023 am 08:12 AM

JavaScript에서 지정된 요소 위치로 스크롤하는 기능을 구현하는 방법은 무엇입니까? 웹 페이지에서 특정 요소 위치에 사용자의 주의를 집중시켜야 할 때 JavaScript를 사용하여 지정된 요소 위치로 스크롤하는 기능을 구현할 수 있습니다. 이 기사에서는 JavaScript를 통해 이 기능을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다. 먼저, 대상 요소의 위치 정보를 얻어야 합니다. Element.getBoundingClient를 사용할 수 있습니다.

151은 China Mobile 또는 China Unicom으로 시작합니까? 151은 China Mobile 또는 China Unicom으로 시작합니까? Mar 06, 2023 am 11:43 AM

151로 시작하는 숫자는 이동통신사의 번호 부분입니다. 151은 차이나모바일의 번호블록 중 하나로 2008년부터 번호 할당을 시작했다. 158, 159, 150 번호에 이어 '13'으로 시작하지 않는 네 번째 번호블록이기도 하다. 151 수자원 부족을 완화하기 위함이다.

HTML, CSS, jQuery: 자동 스크롤 게시판 만들기 HTML, CSS, jQuery: 자동 스크롤 게시판 만들기 Oct 27, 2023 pm 06:31 PM

HTML, CSS 및 jQuery: 자동으로 스크롤되는 게시판 만들기 현대 웹 디자인에서 게시판은 중요한 정보를 전달하고 사용자의 관심을 끌기 위해 자주 사용됩니다. 자동 스크롤 게시판은 웹 페이지에서 널리 사용되며 게시판 내용을 애니메이션 형태로 페이지에 스크롤하여 표시하여 정보 표시 효과와 사용자 경험을 향상시킵니다. 이번 글에서는 HTML, CSS, jQuery를 활용해 자동 스크롤 게시판을 만드는 방법을 소개하고, 구체적인 코드 예시를 제공하겠습니다. 먼저 HT가 필요합니다.

See all articles