个人中心
gpt4 book ai didi

jquery - 如何将 ".position().left"的值和 "scrollLeft"的行为应用于溢出容器

转载 作者：行者123 更新时间：2023-11-28 00:24:53 25 4
gpt4 key购买 nike

我正在尝试通过调用函数将溢出 flexbox 容器的内容从一个 div 水平滚动到另一个 div。

HTML #href 和 jQuery window.location 实现了我的目的，但它们还将容器滚动到窗口的顶部，而不是只滚动容器的内容而不改变窗口位置。

我认为解决方案是:

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

然而，currentSlideFocus 的值只有我预期的 10% 左右，scrollLeft 的滚动行为量似乎只有 currentSlideFocus 的 10% 左右。给了什么？

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>

最佳答案

我有点弄清楚了为什么我从 position().left 得到结果，而不是仔细研究 CSS，我重新考虑了我使用变量的方式并去了这条路线，而不是。就像一个魅力。

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

关于jquery - 如何将 ".position().left"的值和 "scrollLeft"的行为应用于溢出容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54680683/

25 4 0
文章推荐： reactjs - 位置为 : relative? 的 TransitionGroup/CSSTransition
文章推荐： javascript - 是否可以使用javascript将背景图像设置为用户电脑上的图像？
文章推荐： javascript - Arguments 对象的 "unusual"特征
文章推荐： css - Flexbox div 在带有滚动条的固定容器中与另一个 div 重叠
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com