文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >ScrollTop仅滚动到可滚动div中可见的第一视图项

问ScrollTop仅滚动到可滚动div中可见的第一视图项
EN

Stack Overflow用户
提问于 2021-05-07 18:01:40
回答 1查看 26关注 0票数 0

我正在尝试滚动到overflow-y:scroll目录中的li项。最初的几个li正在滚动，但是看不到的那些不能工作，你不能滚动到它们。

我也得到了这个错误：Uncaught TypeError: Cannot read property 'top' of undefined。

要激活滚动到，您需要单击一个.plot__map__item，因为这将触发右侧的可滚动列表进行滚动。

jsFiddle here.

代码如下：

​

代码语言：javascript
复制
$('.plot__list__item').hover(function () {
        $(this).toggleClass('active');
        $('#' + $(this).data('map')).toggleClass('selected');
    });

    $('.plot__map__item').hover(function () {
        $(this).toggleClass('active');
        $('#' + $(this).data('list')).toggleClass('selected');
    });

    $('.plot__map__item').each(function () { // for each span
        var target = $(this).data('list'); // get the text of the span
        var scrollPos = $('#' + target).position().top; // use the text of the span to create an ID and get the top position of that element
        $(this).click(function () { // when you click each span 
            $('.plot__list').animate({ // animate your right div
                scrollTop: scrollPos // to the position of the target 
            }, 400);
        });
    });
代码语言：javascript
复制
.plot__headings { list-style: none; padding: 0; margin: 0; font-family: proxima-nova, sans-serif; font-weight: 700; font-style: normal; font-size: 12px; line-height: 2rem; color: #333333; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; }

.plot__headings li { width: 25%; text-align: center; padding: 30px 0; }

.plot__list { list-style: none; padding: 0; margin: 0; width: 100%; position: relative; height: 713px; overflow-y: scroll; }

.plot__list li { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 30px 0; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: all; -o-transition-property: all; transition-property: all; }

.plot__list li:nth-child(even) { background: #F5F5F5; }

.plot__list li span { width: 25%; text-align: center; font-size:12px; line-height: 2.8rem; }

.plot__list li span:first-child { font-family: proxima-nova, sans-serif; font-weight: 600; font-style: normal; }

.plot__list li.selected { background: #AA976F; }

.plot__map__item { padding: 10px 15px;
        display: inline-block; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: all; -o-transition-property: all; transition-property: all; }

.plot__map__item.selected { background: #AA976F; }
代码语言：javascript
复制
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="plot-module container o-pd-top-md">
        <div class="row">
            <div class="col-md-8">
                <div class="svg-map">
                    <div id="plot-01" data-list="plot-list-01" class="plot__map__item"> Plot 01 </div>
                    <div id="plot-02" data-list="plot-list-02" class="plot__map__item"> Plot 02 </div>
                    <div id="plot-03" data-list="plot-list-03" class="plot__map__item"> Plot 03 </div>
                    <div id="plot-04" data-list="plot-list-04" class="plot__map__item"> Plot 04 </div>
                    <div id="plot-05" data-list="plot-list-05" class="plot__map__item"> Plot 05 </div>
                    <div id="plot-06" data-list="plot-list-06" class="plot__map__item"> Plot 06 </div>
                    <div id="plot-07" data-list="plot-list-07" class="plot__map__item"> Plot 07 </div>
                    <div id="plot-08" data-list="plot-list-08" class="plot__map__item"> Plot 08 </div>
                    <div id="plot-09" data-list="plot-list-09" class="plot__map__item"> Plot 09 </div>
                    <div id="plot-10" data-list="plot-list-10" class="plot__map__item"> Plot 10 </div>
                    <div id="plot-11" data-list="plot-list-11" class="plot__map__item"> Plot 11 </div>
                    <div id="plot-12" data-list="plot-list-12" class="plot__map__item"> Plot 12 </div>
                    <div id="plot-13" data-list="plot-list-13" class="plot__map__item"> Plot 13 </div>
                    <div id="plot-14" data-list="plot-list-14" class="plot__map__item"> Plot 14 </div>
                    <div id="plot-15" data-list="plot-list-15" class="plot__map__item"> Plot 15 </div>
                    <div id="plot-16" data-list="plot-list-16" class="plot__map__item"> Plot 16 </div>
                    <div id="plot-17" data-list="plot-list-17" class="plot__map__item"> Plot 17 </div>
                    <div id="plot-18" data-list="plot-list-18" class="plot__map__item"> Plot 18 </div>
                    <div id="plot-19" data-list="plot-list-19" class="plot__map__item"> Plot 19 </div>
                    <div id="plot-20" data-list="plot-list-20" class="plot__map__item"> Plot 20 </div>
                    <div id="plot-21" data-list="plot-list-21" class="plot__map__item"> Plot 21 </div>
                    <div id="plot-22" data-list="plot-list-22" class="plot__map__item"> Plot 22 </div>
                    <div id="plot-23" data-list="plot-list-23" class="plot__map__item"> Plot 23 </div>
                    <div id="plot-24" data-list="plot-list-24" class="plot__map__item"> Plot 24 </div>
                    <div id="plot-25" data-list="plot-list-25" class="plot__map__item"> Plot 25 </div>
                    <div id="plot-26" data-list="plot-list-26" class="plot__map__item"> Plot 26 </div>
                    <div id="plot-27" data-list="plot-list-27" class="plot__map__item"> Plot 27 </div>
                    <div id="plot-28" data-list="plot-list-28" class="plot__map__item"> Plot 28 </div>
                    <div id="plot-29" data-list="plot-list-29" class="plot__map__item"> Plot 29 </div>
                    <div id="plot-30" data-list="plot-list-30" class="plot__map__item"> Plot 30 </div>
                    <div id="plot-31" data-list="plot-list-31" class="plot__map__item"> Plot 31 </div>
                    <div id="plot-32" data-list="plot-list-32" class="plot__map__item"> Plot 32 </div>
                    <div id="plot-33" data-list="plot-list-33" class="plot__map__item"> Plot 33 </div>
                </div>
            </div>
            <div class="col-md-4">
                <ul class="plot__headings">
                    <li class="plot__headings__item">Villa Plot</li>
                    <li class="plot__headings__item">Plot Size</li>
                    <li class="plot__headings__item">Buildable Area</li>
                    <li class="plot__headings__item">Coverage</li>
                </ul>
                <ul class="plot__list">
                    <li id="plot-list-01" data-map="plot-01" class="plot__list__item">
                        <span>Plot 01</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-02" data-map="plot-02" class="plot__list__item">
                        <span>Plot 02</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-03" data-map="plot-03" class="plot__list__item">
                        <span>Plot 03</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-04" data-map="plot-04" class="plot__list__item">
                        <span>Plot 04</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-05" data-map="plot-05" class="plot__list__item">
                        <span>Plot 05</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-06" data-map="plot-06" class="plot__list__item">
                        <span>Plot 06</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-07" data-map="plot-07" class="plot__list__item">
                        <span>Plot 07</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li data-map="plot-08" data-map="plot-08" class="plot__list__item">
                        <span>Plot 08</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-09" data-map="plot-09" class="plot__list__item">
                        <span>Plot 09</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-10" data-map="plot-10" class="plot__list__item">
                        <span>Plot 10</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-11" data-map="plot-11" class="plot__list__item">
                        <span>Plot 11</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-12" data-map="plot-12" class="plot__list__item">
                        <span>Plot 12</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-13" data-map="plot-13" class="plot__list__item">
                        <span>Plot 13</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-14" data-map="plot-14" class="plot__list__item">
                        <span>Plot 14</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-15" data-map="plot-15" class="plot__list__item">
                        <span>Plot 15</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-16" data-map="plot-16" class="plot__list__item">
                        <span>Plot 16</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-17" data-map="plot-17" class="plot__list__item">
                        <span>Plot 17</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-18" data-map="plot-18" class="plot__list__item">
                        <span>Plot 18</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-19" data-map="plot-19" class="plot__list__item">
                        <span>Plot 19</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-20" data-map="plot-20" class="plot__list__item">
                        <span>Plot 20</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-21" data-map="plot-21" class="plot__list__item">
                        <span>Plot 21</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-22" data-map="plot-22"  class="plot__list__item">
                        <span>Plot 22</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-23" data-map="plot-23"  class="plot__list__item">
                        <span>Plot 23</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li  id="plot-list-24" data-map="plot-24"  class="plot__list__item">
                        <span>Plot 24</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-25" data-map="plot-25"  class="plot__list__item">
                        <span>Plot 25</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-26" data-map="plot-26"  class="plot__list__item">
                        <span>Plot 26</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-27" data-map="plot-27"  class="plot__list__item">
                        <span>Plot 27</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-28" data-map="plot-28"  class="plot__list__item">
                        <span>Plot 28</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-29" data-map="plot-29"  class="plot__list__item">
                        <span>Plot 29</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-30" data-map="plot-30"  class="plot__list__item">
                        <span>Plot 30</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-31" data-map="plot-32"  class="plot__list__item">
                        <span>Plot 31</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-32" data-map="plot-32"  class="plot__list__item">
                        <span>Plot 32</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                    <li id="plot-list-33" data-map="plot-33"  class="plot__list__item">
                        <span>Plot 33</span>
                        <span>3,200</span>
                        <span>1,120</span>
                        <span>35</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>

​

javascript
html
jquery
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-07 18:28:15

代码语言：javascript
复制
$('.plot__list__item').hover(function () {
    $(this).toggleClass('active');
    $('#' + $(this).data('map')).toggleClass('selected');
});

$('.plot__map__item').hover(function () {
    $(this).toggleClass('active');
    $('#' + $(this).data('list')).toggleClass('selected');
});
    
$('.plot__map__item').click(function() {
    let id = $(this).data('list');
    let scrollPos = $('#' + id).position().top;
    $('.plot__list').animate({
        scrollTop: scrollPos
    }, 400);
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67432811

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档