как применить значение ".position (). left" и поведение "scrollLeft" к контейнеру переполнения - PullRequest
0 голосов
/ 14 февраля 2019

Я пытаюсь горизонтально прокрутить содержимое контейнера переполнения flexbox от одного div к другому, вызывая функцию.

HTML #href и jQuery window.location полностью выполнили мою цель, но они также прокручивалиськонтейнер до верхней части окна, вместо того чтобы прокручивать содержимое контейнера без изменения положения окна.

Я полагал, что решение таково:

var currentSlideFocus = $("#select_slide_" + currentSlide).position().left;
$("#slideWindow").scrollLeft(currentSlideFocus);

Однако значение currentSlideFocus составляет всего лишь около 10% от того, что я ожидал, и объем прокрутки от scrollLeft, кажется, составляет всего около10% от того, что CurrentSlideFocus.Что дает?

Измеряет ли position (). Left расстояние между левой стороной элемента относительно левой стороны его контейнера или я неверно интерпретирую это?

Вот JSfiddle скелетонизированного проекта ниже.Благодарю.https://jsfiddle.net/goneZoe/sf46ea03/

<!DOCTYPE html> 
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            var currentSlide = 1;
            var slideLink = 1;
            var totalSlides;
            var currentSlideFocus;
            var slideIntvl;
            var slideVW;
            jQuery(function() {
                totalSlides = $('.slide_frame').length;
                $(".current_slide").html(currentSlide);
                $(".total_slides").html(totalSlides);
                $(".position_left").html(currentSlideFocus);
                $(makeControlLinks);
                $("#select_slide_" + currentSlide).addClass('active_slide_control');
                $(slideSlider);
            })();
            /* slide every 5 seconds, pause on mouse hover, resume after mouseout */
            function slideSlider(){
                slideIntvl = setInterval(slideNext, 5000);
                $(".slider_wrapper").hover(function() {     
                    clearInterval(slideIntvl);
                }, function() { 
                    slideIntvl = setInterval(slideNext, 5000);
                });
            }
            /* previous and next controls */
            function slideNext(){
                if (currentSlide < totalSlides) {
                    nextSlide = currentSlide + 1;
                } else {
                    nextSlide = 1;
                }
                currentSlide = nextSlide;
                $(changeSlide);
            }
            function slidePrev(){
                if (currentSlide == 1) {
                    prevSlide = totalSlides
                } else {
                    prevSlide = currentSlide - 1;
                }
                currentSlide = prevSlide;
                $(changeSlide);
            }
            /* formula to change that slide when the time comes */
            function changeSlide(){
                var currentSlideFocus = $("#select_slide_" + currentSlide).position().left;
                $("#slideWindow").scrollLeft(currentSlideFocus);
                $(".active_slide_control").removeClass('active_slide_control');
                $("#select_slide_" + currentSlide).addClass('active_slide_control');
                $(".current_slide").html(currentSlide);
                $(".position_left").html(currentSlideFocus);
            }
            /* --------- generate skip-to links ---------- */
            function makeControlLinks(){
                if (slideLink <= totalSlides){
                    $("#frame_select").append('<a id="select_slide_'+slideLink+'" class="selector" onclick="selectSlide'+slideLink+'()">'+slideLink+'</a>');
                    slideLink = slideLink + 1;
                    $(makeControlLinks);
                } else {
                    return false;
                }   
            }
            /* individual jump-to specific controls */
            function selectSlide1(){
                currentSlide = 1;
                $(changeSlide);
            }
            function selectSlide2(){
                currentSlide = 2;
                $(changeSlide);
            }
            function selectSlide3(){
                currentSlide = 3;
                $(changeSlide);
            }
            function selectSlide4(){
                currentSlide = 4;
                $(changeSlide);
            }
            function selectSlide5(){
                currentSlide = 5;
                $(changeSlide);
            }
            function selectSlide6(){
                currentSlide = 6;
                $(changeSlide);
            }
            function selectSlide7(){
                currentSlide = 7;
                $(changeSlide);
            }
            function selectSlide8(){
                currentSlide = 8;
                $(changeSlide);
            }
            function selectSlide9(){
                currentSlide = 9;
                $(changeSlide);
            }
        </script>
        <style type ="text/css">
            #slider_wrapper_container {
                position: relative;
                display: block;
                width: 100vw;
                left: -24.15vw;
                height: auto;
            }

            .slider_wrapper {
                position: relative;
                display: block;
                margin: auto;
                margin-top: 50px;
                margin-bottom: 50px;
                width: 65vw;
                height: calc(36.562vw + 66px);
                border: 1px solid rgb(51, 51, 51);
                overflow: hidden;
            }

            .slide_window {
                display: flex;
                flex-direction: row;
              scroll-behavior: smooth;
                overflow-x: hidden;
            }

            .slide_frame {
                position: relative;
                display: block;
                width: 100%;
              height: 100px;
                flex-shrink: 0;
              border: 2px solid blue;
            }

            .slide_frame p{
              position: relative;
              display: block;
              width: 1em;
              margin: auto;
              font-size: 2em;
            }

            #frame_select {
                position: relative;
                display: block;
                margin: auto;
                padding-top: 20px;
                text-align: center;
                width: 85%;
            }

            .slider_controls {
                position: absolute;
                display: block;
                height: 66px;
                width: 100%;
                bottom: 0px;
            }

            .selector {
                padding: 5px;
                text-align: center;
                text-decoration: none;
                margin: 5px;
                border: 1px solid rgb(91, 91, 91);
                cursor: pointer;
            }

            .active_slide_control {
                background-color: black;
              color: white;
                cursor: default;
            }

            #left_arrow, #right_arrow {
                position: absolute;
                display: inline;
                height: 100%;
                padding: 10px;
                padding-top: 20px;
                cursor: pointer;
            }

            #left_arrow {
                float: left;
            }

            #right_arrow {
                float: right;
                right: 0px;
                top: 0px;
            }

            #right_arrow {
                float: right;
                border-bottom-right-radius: 40px 20px;
            }

            #left_control, #right_control {
                height: 50%;
            }
        </style>
    </head>
    <body>
        <div class="slider_wrapper">
            <div id="slideWindow" class="slide_window">
                <div id="slide_1" class="slide_frame">
                    <p>1</p>
                </div>
                <div id="slide_2" class="slide_frame">
                    <p>2</p>
                </div>
                <div id="slide_3" class="slide_frame">
                    <p>3</p>
                </div>
                <div id="slide_4" class="slide_frame">
                    <p>4</p>
                </div>
                <div id="slide_5" class="slide_frame">
                    <p>5</p>
                </div>
            </div>
            <div class="slider_controls">
                <div id="left_arrow" onclick="slidePrev()">
                    <a><--</a>
                </div>
                <div id="frame_select">
                </div>
                <div id="right_arrow" onclick="slideNext()">
                    <a>--></a>
                </div>
            </div>
        </div>
        <a id="readout">Current slide is #<span class="current_slide">?</span> out of <span class="total_slides">?</span> slides. The position.left value of currentSlide is <span class="position_left">?</span></a>
    </body>
</html>

1 Ответ

0 голосов
/ 16 февраля 2019

I вроде выяснил, почему я получаю результаты из position (). Оставил, что был, и вместо того, чтобы обдумывать CSS, я переосмыслил способ использования переменных и пошел такмаршрут, а не.Работает как шарм.

singleSlideWidth = $(".slide_frame").width();
slideMeasure = currentSlide - 1;
currentSlideDistance = singleSlideWidth * slideMeasure;
$("#slideWindow").scrollLeft(currentSlideDistance); 
...