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() vs offset()。在CSS中将.portfolio-horizontal-wrapper元素设置为position: relative有助于JQuery获得要定位的元素的正确当前 x位置....无论如何，如果这太令人困惑或没有意义或你不在乎：）....这里是一个工作JSFiddle。希望这会有所帮助。

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

1 个答案: