在 div 中滚动突出显示的文本答案

【问题标题】：Scroll highlighted text in div在 div 中滚动突出显示的文本
【发布时间】：2020-05-22 13:10:34
【问题描述】：

我使用 frogaloop 制作了视频脚本，并尝试在添加 .highlight 类时自动滚动 div 中的文本。

 function checkTime() {
      froogInstance.addEvent('playProgress', function(data) {
        var curTime = Math.floor(Number(data.seconds));
        if(events[curTime]) {
          $('.highlight').removeClass('highlight');
          events[curTime].addClass('highlight');
          $('span:time-span(.highlight):first');
        }
      });
    }
    jumpToClickedSentance(args);
    initTimes(args);
    return this;
  }

我已尝试添加$('span:time-span(.highlight):first');。但是，这不起作用。文本不滚动。

【问题讨论】：

我相信你得到了<span>，你想在jumpToClickedSentance函数中移动滚动条。一旦你有了目标，你就可以在 javascript 中做这样的事情：var val = $((this).offsetTop); $("#player_1_transcript").scrollTop(val.get()); $(this) 应该是你想要移动滚动条的目标
var scroll = $(window).scrollTop(); var val = $(('.highlight').offsetTop); $("#player_1_transcript").scrollTop(val.get()); 这没用

标签： javascript html frontend vimeo vimeo-api

【解决方案1】：

感谢：https://stackoverflow.com/a/24390378/1035130

我添加了这个及其工作

var $container = $("#player_1_transcript");
          var $scrollTo = $('.highlight');
          $container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);

【讨论】：