导航到 div 中水平布局的内容，溢出设置为隐藏

Question

我有三个菜单链接，我希望它们水平导航到设置为溢出隐藏的容器 div 内的三个不同部分。

到目前为止，我只允许我滚动到 div 的最右侧，但当我单击另一个菜单链接时不会再次移动。

该脚本改编自 ScrollTop，它在 html、body 上运行良好，但与目标 div 上的 ScrollLeft 不同。

我的想法是，由于它在整个页面上垂直工作，我可以调整它以在目标区域上工作以水平操作，但到目前为止情况并非如此。如果有人可以帮助我解决这个问题，那将非常有帮助。

<menu  id="portfolio-nav">

    <a href="#design-industrial">
    </a>

    <a href="#design-print">
    </a>

    <a href="#design-photography">
    </a>    

</menu>

<div class="portfolio-container">
    <div class="portfolio-horizontal-wrapper">

        <div id="design-industrial" class="portfolio-content"> 
        </div>

        <div id="design-print" class="portfolio-content"> 
        </div>

        <div id="design-photography" class="portfolio-content"> 
        </div>

    </div>
</div>

<style>

.portfolio-container {
    width: 260px; 
    height: 300px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.portfolio-horizontal-wrapper {
    width: auto;
    height: 100%;
    white-space:nowrap;
}

.portfolio-content {
    width: 260px;
    height: 100%;
    display: inline-block;
}

</style>


<script type="text/javascript"> 

    $(document).ready(function(){
        $('a[href^="#"]').on('click',function (event) {
            event.preventDefault();

            var target = this.hash,
            $target = $(target);

             $('.portfolio-container, .portfolio-horizontal-wrapper').animate({
                'scrollLeft': $target.offset().left -62}, 1111, 'swing', function () {        
            });
        });
    });

</script>

Answer 1

我不知道您是否想要解释为什么它不工作或只是工作代码...... 主要问题是使用position() 与offset()。此外，在 CSS 中将 .portfolio-horizontal-wrapper 元素设置为 position: relative 有助于 JQuery 获得您要定位的元素的正确 current x 位置......无论如何，如果那太令人困惑或没有意义或你不在乎:)....这是一个有效的JSFiddle。希望这会有所帮助。