如何在溢出隐藏的 div 中滚动到某个当前不可见的元素? [英] How to scroll within an overflow hidden div to a certain currently invisible element?

查看：17
本文介绍了如何在溢出隐藏的 div 中滚动到某个当前不可见的元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个溢出隐藏 div 中的元素列表.因此，并非所有元素都可见.现在，如果一个元素被激活，它应该在 div 中可见.

如何使用 jQuery 滚动到活动元素?

最后一个元素具有活动类只是为了方便.它将动态切换.

 var scrollToEl = $("div.element.active");console.log(zoomToEl);

 #main,#侧边栏{高度:200px；}#包装{宽度:190px；向左飘浮;背景:灰色；溢出:自动；溢出-x:隐藏；}#sidebar div.element {高度:150px；宽度:150px；背景颜色:绿色；底边距:10px；}#sidebar div.element.active {背景颜色:红色；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="main"><div id="wrapper" class="sidebar"><div id="侧边栏"><div class="element" data-slide-id="0">a

<div class="element" data-slide-id="1">b

<div class="element" data-slide-id="2">c

<div class="element" data-slide-id="3">d

<div class="element" data-slide-id="4">e

<div class="element" data-slide-id="5">f

<div class="element" data-slide-id="6">g

<div class="element active" data-slide-id="7">h

应该变为可见的元素:

var scrollToEl = $("div.element.active");

解决方案

您可以设置scrollTop 是 position 的 top活动元素.

$("#wrapper").scrollTop($("#wrapper").scrollTop() + $("div.element.active").position().top);

演示

I have a list of elements within a overflow hidden div. So not all elements are visible. Now, if an element gets activated, it should become visible within the div.

How do I scroll to the active element using jQuery?

It's merely a convenience that the last element has the active class. It will be toggled dynamically.

 var scrollToEl = $("div.element.active");
 console.log(zoomToEl);

 #main,
 #sidebar {
   height: 200px;
 }
 #wrapper {
   width: 190px;
   float: left;
   background: grey;
   overflow: auto;
   overflow-x: hidden;
 }
 #sidebar div.element {
   height: 150px;
   width: 150px;
   background-color: green;
   margin-bottom: 10px;
 }
 #sidebar div.element.active {
   background-color: red;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div id="wrapper" class="sidebar">
    <div id="sidebar">
      <div class="element" data-slide-id="0">a
      </div>
      <div class="element" data-slide-id="1">b
      </div>
      <div class="element" data-slide-id="2">c
      </div>
      <div class="element" data-slide-id="3">d
      </div>
      <div class="element" data-slide-id="4">e
      </div>
      <div class="element" data-slide-id="5">f
      </div>
      <div class="element" data-slide-id="6">g
      </div>
      <div class="element active" data-slide-id="7">h
      </div>
    </div>
  </div>
</div>

The element that should become visible:

var scrollToEl = $("div.element.active");

解决方案

You can set the scrollTop of the wrapper div to be the top of the position of the active element.

$("#wrapper").scrollTop($("#wrapper").scrollTop() + $("div.element.active").position().top);

DEMO

这篇关于如何在溢出隐藏的 div 中滚动到某个当前不可见的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆