Safari에서 다른 페이지에서 시작된 페이지 내 링크의 위치가 잘못된 문제는 JS의 영향입니다

6171 단어 HTMLbxsliderCSS
스마트폰 인코딩할 때.
다른 페이지의 페이지 내 링크가 설치된 경우
일부 링크만 1000px 정도로 마음대로 아래로 굴러갔고 위치가 벗어났다.
이미 설치된 JS를 모두 삭제한 후에 시도해 보았습니다. 잘 움직였기 때문입니다.
나는 JS의 기능을 하나하나 논평하고 클릭해 보았다
bxSlider 부분에 영향을 미쳤습니다.
※ bxSlider(슬라이더 플러그인)
https://bxslider.com/

원인


PC의 Chrome 에뮬레이터, bxSlider 성형이 끝난 후의 높이를 가늠하기 위해 페이지 내 링크의 위치를 분배
Safari는 bxSlider의 성형 전 고도 이동 페이지에 따라 링크된 것 같은데...


어떻게 처리했어


bxSlider 포위 부분 라벨에 성형 후 예측 heightoverflow: hidden; 을 미리 걸면
bxSlider 성형은 고도의 편차가 생기기 쉬우므로 해결했습니다!
.section-member-list-wrap { /* スライダーするリストを囲うタグのclass */
    height: 235px;
    overflow: hidden;
}

기타 발췌 소스 코드

<nav>
    <ul>
        <li><a href="/index.html">Top</a></li>
        <li><a href="/index.html#vision">Vision</a></li>
        <li><a href="/service.html">Service</a></li>
        <li><a href="/index.html#company">Company</a></li> <!-- ←問題のリンク -->
    </ul>
</nav>

<section>
// コンテンツ内容は略
</section>

<section id="vision"> <!-- ←ここへはちゃんとたどり着く -->
// コンテンツ内容は略
</section>

<section>
    <div id="js-list-member" class="section-member-list-wrap">
        <ul class="list-member">
            <li>
                <figure><img></figure>
                <h3>名前1</h3>
            </li>
            <li>
                <figure><img></figure>
                <h3>名前2</h3>
            </li>
            <li>
                <figure><img></figure>
                <h3>名前3</h3>
            </li>
</section>

<section id="company"> <!-- ←ここはずれる -->
// コンテンツ内容は略
</section>

jQuery(function () {
    'use strict';

    // bxSlider
    jQuery('#js-list-member .list-member').bxSlider({
        mode: 'horizontal',
        moveSlides: 1,
        slideMargin: 12,
        infiniteLoop: true,
        slideWidth: 154,
        minSlides: 3,
        maxSlides: 3,
        speed: 300,
        pager: false,
        controls: false,
    });
});

동작 확인 환경


iOS 13.3 Safari

좋은 웹페이지 즐겨찾기