如何使用 jquery 根据滚动框内容使元素可滚动？

Question

我的要求是使用 JQuery 根据滚动框内容框滚动 slider 控件。 并相应地更改左侧的内容。 如何使用 Jquery 实现此目的，我尝试使用滚动使控件滚动，但它不滚动。

以下是我的示例https://codepen.io/divya95/pen/GRogLoR

以下是我的代码：

<div class="row">
      <div class="flex-scroll tab__margin">
        <div class="describe">
          <p>Cognitive workflow deliver omi-channel business's journey</p>

        </div>
        <div class="slider-column">
          <div class="avatar-column">
            <div class="avatar"></div>

          </div>
          <div class="solutions">
            <div>
              <h5>Email, Chat & Voice</h5>
            </div>
            <div>
              <h5>Web & Mobile</h5>
            </div>
            <div>
              <h5>Whatsapp, Facebook, Twitter</h5>
            </div>

          </div>

        </div>
      </div>
    </div>

Css

.flex-scroll {
    display: flex;
    flex-direction: row;
    border: 1px solid black;
    width: 70%;
    margin: 0 auto;
}
.slider-column {
    display: flex;
    /* flex-direction: column;   */
}
.describe {
    width: 95%;
}
.solutions {
    border-left: 3px solid #2492f8;
    height:150px; 
    overflow:auto;
}
.avatar-column {
    padding-right: 32px;


}
.avatar {
    width: 50px;
    height: 50px;
    position: relative;
    top: 12px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.avatar::after {
    content: "";
    width: 22px;
    height: 3px;
    background: #9dcffb;
    position: absolute;
    top: 20px;
    right: -31px;
    outline: 4px solid #fff;
}

Answer 1

好的，使用 jQuery 检查此解决方案。 您可以根据需要对其进行调整。

• 在头像 div 上的 mousedown 和 mousemove 上，不同的部分内容基于滚动 position 显示。
• 在 mouseup 上 slider 指向第一个孩子并显示它的内容。
• 请注意：这里假设所有子元素的高度相同，否则会影响左侧内容切换时的准确性。 它是通过在css 8CBA22E28EB17B5F5C6AE2A266AZ 中为.child class 设置高度值来强制执行的。

在“整页”模式下测试解决方案。

 (function($) { const $slider = $("#circleslider"); const $products = $("#products"); const $contentDiv = $("#div1"); const $avatarColumn = $('.avatar-column'); const $children = $products.find('.child'); // assuming height of all child same. // grab the child element height for one for calculation // purposes. const childHeight = Math.ceil($children.first().outerHeight(true)); const avatarColumnHeight = $avatarColumn.height(); const productsColumnHeight = childHeight * $children.length; const sliderInitialPosition = $slider.position(); const sliderOffset = $slider.offset(); const avatarColumnOffset = $avatarColumn.offset(); let isClicked = false; let initialMouseOffset; const sliderRangeMin = $slider.height()/2; const sliderRangeMax = $avatarColumn.height() - $slider.height(); const effectiveSliderHeight = sliderRangeMax - sliderRangeMin; const childHeightEquivalentInSlider = effectiveSliderHeight/$children.length; // text corresponding to each product choice const texts = [ "section 1", "section 2", "section 3", "section 4", "section 5", "section 6", "section 7", "section 8", "section 9", "section 10", "section 11", "section 12", "section 13", "section 14", "section 15" ]; if ($slider.length) { $slider.on("mousedown", (e) => { isClicked = true; initialMouseOffset = e.pageY - avatarColumnOffset.top; $contentDiv.css('user-select', 'none'); }); $(document).on("mousemove", (e) => { if (isClicked === true) { // change position of the slider const minMouseListen = sliderRangeMin > initialMouseOffset? initialMouseOffset: sliderRangeMin; const maxMouseListen = sliderRangeMax + (initialMouseOffset - sliderRangeMin); const maxSliderTop = $avatarColumn.height() - $slider.height(); const mouseOffset = e.pageY - avatarColumnOffset.top; if (mouseOffset > minMouseListen && mouseOffset < maxMouseListen) { $slider.css('top', ((mouseOffset - minMouseListen) > maxSliderTop? maxSliderTop: (mouseOffset - minMouseListen)) + 'px'); } else if (mouseOffset <= minMouseListen) { $slider.css('top', sliderInitialPosition.top + 'px'); } else { $slider.css('top', maxSliderTop +'px'); } // scroll the content section on the right const sliderStep = (mouseOffset - minMouseListen) / childHeightEquivalentInSlider; const scrollMultiplier = productsColumnHeight/effectiveSliderHeight; const sliderCurrentTop = $slider.position().top; const scrollPosition = sliderCurrentTop * scrollMultiplier; $products.scrollTop(scrollPosition); // change content in left section let textIndexToShow = Math.floor(sliderStep); $contentDiv.text(texts[textIndexToShow] || texts[texts.length]); } }); $(document).on("mouseup", (e) => { resetSlider(); }); function resetSlider() { if (isClicked === true) { isClicked = false; scrollSlowDownRate = 0; scrollSpeedUpRate = 0; // reset content section on right $products.scrollTop(0); $contentDiv.text(texts[0]); $contentDiv.css('user-select', 'auto'); // reset slider $slider.css('top', sliderInitialPosition.top + 'px'); } } } })(jQuery);

 * { box-sizing: border-box; }.flex-scroll { display: flex; flex-direction: row; /* border: 1px solid black; */ width: 70%; margin: 2em auto; }.slider-column { display: flex; /* flex-direction: column; */ }.describe { width: 50%; }.icons { padding-bottom: 1em; } i { margin-right: 1em; }.solutions { border-left: 3px solid #2492f8; max-height: 300px; /* overflow-y: scroll; */ overflow-y: hidden; padding-left: 1rem; padding-top: 1.25rem; }.child { box-sizing: border-box; height: 100px; padding-top: 1rem; overflow: hidden; }.child h5 { margin-top: 0; font-size: 1rem; user-select: none; }.avatar-column { position: relative; padding-right: 32px; }.avatar { width: 40px; height: 40px; position: relative; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); box-sizing: border-box; background-color: grey; }.avatar::after { content: ""; width: 22px; height: 3px; background: #9dcffb; position: absolute; top: 16px; right: -31px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <div class="row"> <div class="flex-scroll tab__margin slider__padding"> <div class="describe"> <div id="div1">section 1</div> </div> <div class="slider-column"> <div class="avatar-column"> <div class="avatar" id="circleslider"></div> </div> <div class="solutions" id="products"> <div class="child"> <h5>Section 1</h5> <div class="icons"> <i class="fa fa-comment" aria-hidden="true"></i> <i class="fa fa-bell" aria-hidden="true"></i> <i class="fa fa-mobile" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 2</h5> <div class="icons"> <i class="fa fa-user-circle" aria-hidden="true"></i> <i class="fa fa-bar-chart" aria-hidden="true"></i> <i class="fa fa-comment" aria-hidden="true"></i> <i class="fa fa-headphones" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 3</h5> <div class="icons"> <i class="fa fa-map" aria-hidden="true"></i> <i class="fa fa-user-circle" aria-hidden="true"></i> <i class="fa fa-calendar" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 4</h5> <div class="icons"> <i class="fa fa-comment" aria-hidden="true"></i> <i class="fa fa-bell" aria-hidden="true"></i> <i class="fa fa-mobile" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 5</h5> <div class="icons"> <i class="fa fa-user-circle" aria-hidden="true"></i> <i class="fa fa-bar-chart" aria-hidden="true"></i> <i class="fa fa-comment" aria-hidden="true"></i> <i class="fa fa-headphones" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 6</h5> <div class="icons"> <i class="fa fa-map" aria-hidden="true"></i> <i class="fa fa-user-circle" aria-hidden="true"></i> <i class="fa fa-calendar" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 7</h5> <div class="icons"> <i class="fa fa-comment" aria-hidden="true"></i> <i class="fa fa-bell" aria-hidden="true"></i> <i class="fa fa-mobile" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 8</h5> <div class="icons"> <i class="fa fa-user-circle" aria-hidden="true"></i> <i class="fa fa-bar-chart" aria-hidden="true"></i> <i class="fa fa-comment" aria-hidden="true"></i> <i class="fa fa-headphones" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 9</h5> <div class="icons"> <i class="fa fa-map" aria-hidden="true"></i> <i class="fa fa-user-circle" aria-hidden="true"></i> <i class="fa fa-calendar" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 10</h5> <div class="icons"> <i class="fa fa-comment" aria-hidden="true"></i> <i class="fa fa-bell" aria-hidden="true"></i> <i class="fa fa-mobile" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 11</h5> <div class="icons"> <i class="fa fa-user-circle" aria-hidden="true"></i> <i class="fa fa-bar-chart" aria-hidden="true"></i> <i class="fa fa-comment" aria-hidden="true"></i> <i class="fa fa-headphones" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 12</h5> <div class="icons"> <i class="fa fa-map" aria-hidden="true"></i> <i class="fa fa-user-circle" aria-hidden="true"></i> <i class="fa fa-calendar" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 13</h5> <div class="icons"> <i class="fa fa-comment" aria-hidden="true"></i> <i class="fa fa-bell" aria-hidden="true"></i> <i class="fa fa-mobile" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 14</h5> <div class="icons"> <i class="fa fa-user-circle" aria-hidden="true"></i> <i class="fa fa-bar-chart" aria-hidden="true"></i> <i class="fa fa-comment" aria-hidden="true"></i> <i class="fa fa-headphones" aria-hidden="true"></i> </div> </div> <div class="child"> <h5>Section 15</h5> <div class="icons"> <i class="fa fa-map" aria-hidden="true"></i> <i class="fa fa-user-circle" aria-hidden="true"></i> <i class="fa fa-calendar" aria-hidden="true"></i> </div> </div> </div> </div> </div> </div>