将带有“highlight”类的列表项滚动到有序列表元素的视图中

Jordy 发表于 Dev

乔迪

我正在处理多个有序列表 <ol>

每个<ol>都有一个<li>类.highlight

问题：

有时突出显示<li>位于可滚动下方的某处<ol>，因此不可见。

   highlighted list           highlighted list   
   item not visible             item visible
 ____________________       ____________________
|                    |     |                    |
|   browser window   |     |   browser window   | 
|____________________|     |____________________|
|                    |     |                    |
|   List:            |     |   List:            |
|   1. green         |     |   1. green         |
|   2. blue          |     |** 2. blue **       |
|   3. red           |     |   3. red           |  
 --------------------       --------------------
    4. brown                   4. brown     
    5. purple                  5. purple        
    6. yellow                  6. yellow
 ** 7. pink **                 7. pink
    8. orange                  8. orange

解决方案？

将<li>with 班级滚动.highlight到每个班级的顶部<ol>

别的

至少将<li>with 类滚动.highlight到每个内部的视图中<ol>

项目链接：

http://www.paintings.directory

将鼠标悬停在图像上以将类添加.highlight到相应的列表项。（艺术家，艺术品，年份，...）

通常突出显示<li>位于内部的低处<ol>，因此我看不到它们。-_-"

如何滚动查看<li>每个内部突出显示的内容<ol>？

我在 jQuery 中尝试过的：

$('ol > li.highlight').animate({ scrollTop: $('ol').height() }, "slow");

我也在 jQuery 中尝试过的：

我尝试实现.scrollIntoView();如下：

$('img').hover(function() {
        var classes = $(this).attr('class').split(" ").map(function(value) {
            return "." + value;
        }).join(",")
        $('section > ol > li' + classes).addClass('highlight');

        
        $('.highlight').scrollIntoView(); //  <---


    }, function() {
        $('section > ol > li').removeClass('highlight');
});

研究：

我发现这些很有帮助，但无法正确实施：

斯瓦蒂

由于高亮类将被动态添加到不同lis的ol标签中，因此您需要遍历每个高亮类，然后$(this)[0].scrollIntoView();在需要时使用滚动li。

演示代码：

$('img').hover(function() {
  //get class split it and then generated comma seperated value..
  var classes = $(this).attr('class').split(" ").map(function(value) {
    return "li." + value;
  }).join(",")
  $(classes).addClass('highlight'); //add there classs
  //get all highlight ..
  $("section > ol > li.highlight").each(function() {
    $(this)[0].scrollIntoView(); //scroll there
  })
}, function() {
  $('ol > li').removeClass('highlight'); //remove class
});

.highlight {
  color: red;
}

img {
  width: 100px;
  height: 100px
}

ol {
  width: 100%;
  overflow: hidden;
  padding: 0 0 10px 0;
  margin: 0;
  border-bottom: 1px solid gainsboro;
}

section {
  position: relative;
  display: block;
  float: left;
  width: 30%;
  height: 100px;
  box-sizing: border-box;
  overflow-y: scroll;
}

ol li {
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<img src="https://www.ultimatesource.toys/wp-content/uploads/2013/11/dummy-image-portrait-1.jpg" class="year_2010 artist_picasso color_green">
<img src="https://www.ultimatesource.toys/wp-content/uploads/2013/11/dummy-image-portrait-1.jpg" class="year_2009 artist_matisse color_blue">
<img src="https://www.ultimatesource.toys/wp-content/uploads/2013/11/dummy-image-portrait-1.jpg" class="year_2011 artist_matisse color_orange">
<br/>
<section>
  <ol>
    <h1>year</h1>
    <li class="year_2008">2008</li>
    <li class="year_2009">2009</li>
    <li class="year_2001">2001</li>
    <li class="year_2002">2002</li>
    <li class="year_2003">2003</li>
    <li class="year_2010">2010</li>
    <li class="year_2011">2011</li>
  </ol>
</section>
<section>
  <ol>
    <h1>artist</h1>
    <li class="year_DavidHockney">Hockney</li>
    <li class="artist_matisse">Matisse</li>
    <li class="artist_matisse1">Matisse1</li>
    <li class="artist_matisse1">Matisse1</li>
    <li class="artist_miro">Miro</li>
    <li class="year_DavidHockney">Hockney2</li>
    <li class="year_DavidHockney">Hockney2</li>
    <li class="artist_picasso">Picasso</li>
  </ol>
</section>
<section>
  <ol>
    <h1>color</h1>
    <li class="color_blue">Blue</li>
    <li class="color_gred">gren</li>
    <li class="color_red">red</li>
    <li class="color_yeloow">yelow</li>
    <li class="color_green">Green</li>
    <li class="color_red">Red</li>
    <li class="color_pink">pink</li>
    <li class="color_orange">orange</li>
  </ol>
</section>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。