Javascript 如何使用scrollIntoView和overflow：隐藏和不滚动页面？

如何在具有

溢出：隐藏且不应滚动页面的容器上使用scrollIntoView

下面是一个示例：如果您希望在.cnt类中滚动元素，则在页面底部的container
中显示文本



您需要在.cnt中设置每个跨距的样式

.cnt span{

}


在.cnt父级中，您需要定义使滚动工作的高度

.cnt{

  width: 90px;

  /* for example 28px */
  height : 28px;

  overflow: hidden;
  white-space: nowrap;
  padding: 4px;
  border: solid black 1px;

  /* overflow y or x for making scroll*/
  overflow-y : scroll;

}


我希望这些步骤对您有所帮助
要正确实现这一点（即支持所有写入模式、方向和块内联选项），您基本上必须从头开始重写，同时省略滚动框树上的循环。这不是一项微不足道的任务

但是，如果您不需要防弹解决方案，只需获取最近的滚动框，并检查滚动框的大小即可显示元素的开始：


const cnt=document.querySelector（'.cnt'）
const spanElements=cnt.querySelectorAll（'span'）；
const lastSpan=spanElements[spanElements.length-1]
常量firstSpan=span元素[0]
const buttons=Array.from（document.queryselectoral（'button'））
常量[buttonToFirstEl，buttonToLastEl]=按钮；
buttonToFirstEl.onclick=函数（）{
滚动到父视图（firstSpan）；
}
buttonolastel.onclick=函数（）{
滚动到父视图（最后一个span）；
}
函数scrollIntoParentView（元素、选项）{
const directions=getSimpleScrollIntoViewDirections（元素、选项）；
const left=directions.inline|u direction | 0；
const top=directions.block|u方向| 0；
常量新选项={
左边
顶部
行为：（options&&options.behavior）| |“自动”
};
方向。滚动框。滚动（新选项）；
}
函数getSimpleScrollIntoViewDirections（elem，{block=“start”，inline=“start”}={}）{
常量元素_bbox=elem.getBoundingClientRect（）；
常量滚动框=getNearestScrollingBox（elem）；
const scrolling_box_bbox=滚动_box.getBoundingClientRect（）；
const block\u direction=Math.round（元素\u bbox.top-滚动\u box\u bbox.top）；
const inline_direction=Math.round（element_bbox.left-滚动_box_bbox.left）；
返回{
滚动_框，
街区方向，
内联方向
};
}
函数getNearestScrollingBox（elem）{
如果（！elem.isConnected）{return null；}
常量元素计算样式=getComputedStyle（元素）；
//不在规范中，但这似乎是浏览器实现的功能
if（elem_computed_styles.getPropertyValue（'position'）=“fixed”）{
返回null；
}
常量滚动框=elem.parentElement；
如果（！滚动框）{
return elem===document.scrollingElement？空：document.scrollingElement；
}
const computed_style=getComputedStyle（滚动_框）；
const scroll_x=computed_styles.getPropertyValue（“overflow-x”）；
const scroll_y=computed_styles.getPropertyValue（“overflow-y”）；
如果(
（滚动x=='clip'&滚动y==='clip'）||
（scrolling_box.OffseThight
scrollLeft
和
scrollTop
可以很好地处理
overflow:hidden
。我选中第一个span元素上的
scrollLeft
属性，而不是它的容器

更改span的父元素上的
scrollLeft
，解决此问题

 firstSpan.parentElement.scrollLeft = 0;


const cnt=document.querySelector（'.cnt'）
const spanElements=cnt.querySelectorAll（'span'）；
const lastSpan=spanElements[spanElements.length-1]
常量firstSpan=span元素[0]
lastSpan.scrollIntoView（）
const buttons=Array.from（document.queryselectoral（'button'））
常量[buttonToFirstEl，buttonToLastEl]=按钮；
buttonToFirstEl.onclick=函数（）{
firstSpan.parentElement.scrollLeft=0；
}
buttonolastel.onclick=函数（）{
const cnt=lastSpan.parentElement；
cnt.scrollLeft=cnt.scrollWidth；
}
.cnt{
宽度：90px；
溢出：隐藏；
空白：nowrap；
填充：8px；
边框：实心#ccc 1px；
}
.填料{
宽度：100%；
高度：200px；
边框：虚线2px#ccc；
利润率：20px；
}
.根{
边框：实心1px；
}

滚动到第一个元素
滚动到最后一个元素
第一：苔丝
2:dddd
3:cccddd
4:Rreee
最后：DDDRREDD
是否要进行div.root具有Y滚动，且溢出隐藏在右侧？您只希望scrollIntoView的默认行为，还是能够传递块内联规则？此外，您是否关心写入方向或将所有内容视为从左到右从上到下都可以？@OuchaneCC我想在内部滚动元素..root元素用于显示页面正在滚动too@Kaiido对于本例，默认行为是可以的
  width: 90px;

  /* for example 28px */
  height : 28px;

  overflow: hidden;
  white-space: nowrap;
  padding: 4px;
  border: solid black 1px;

  /* overflow y or x for making scroll*/
  overflow-y : scroll;

 firstSpan.parentElement.scrollLeft = 0;