Question

我有一些代码在单击向右滚动（#nexty）或向左滚动（#prevy）箭头时水平滚动div（测试站点示例在这里：http://abmo.stephensuess.com/project/hi-lo-bbq/），它可以工作在最新的Safari，Firefox，IE ......但不是在Chrome中。在Chrome中，它会在第一次点击时前进，但之后不会在任何后续点击上前进。在其他浏览器中，它会继续按预期进行。

以下是javascript代码：

<script>$(window).load(function(){
  var currentElement = $("#ngg-gallery-list > div:nth-child(2)");
var onScroll = function () {
    //get the current element
    var container = $("#ngg-galleryoverview");
    var wrapper = $("#ngg-gallery-list");
    var children = wrapper.children();
    var position = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        var childLeft = container.offset().left < child.offset().left;
        if (childLeft) {
            currentElement = child;
            console.log(currentElement)
            return;
        }
    }
}

var scrollToElement = function ($element) {
    var container = $("#ngg-galleryoverview");
    var wrapper = $("#ngg-gallery-list");
    var children = wrapper.children();
    var width = 0;
    for (var i = 0; i < children.length; i++) {
        var child = $(children[i]);
        if (child.get(0) == $element.get(0)) {
            if (i == 0) {
                width = 300;
            }
            container.animate({
                scrollLeft: width
            }, 300);
            onScroll();
        }
        if (child.next().length > 0) {
            //make sure we factor in borders/padding/margin in height
            width += child.next().offset().left - child.offset().left
        } else {
            width += child.width();
        }
    }
}

var next = function(event) {
    event.preventDefault();
    scrollToElement(currentElement);
}

var prev = function(event) {
    event.preventDefault();
    var container = $("#ngg-galleryoverview");
    if (currentElement.prev().length > 0) {
        if (container.offset().left == currentElement.prev().offset().left) {
            currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev();
        } else {
            currentElement = currentElement.prev();
        }
    }
    scrollToElement(currentElement);
}

$("#ngg-galleryoverview").scroll(onScroll);
$("#nexty").click(next);
$("#prevy").click(prev);
});
</script>

这是html代码：

 <div id="ngg-galleryoverview"> 
    <div id="ngg-gallery-list" style="width: 4282px;">

        <!-- Thumbnail list -->

        <div id="0" class="list">
                <img class="lazy" src="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Hi-Lo-Signage-600-737x425.jpg" data-original="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Hi-Lo-Signage-600-737x425.jpg" data-original-width="737" data-original-height="425" style="height: 425px; display: inline;">
            <div class="noinfotext"></div>      </div>


        <div id="1" class="list">
                <img class="lazy" src="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Shosugiban-wall-600-638x425.jpg" data-original="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Shosugiban-wall-600-638x425.jpg" data-original-width="638" data-original-height="425" style="height: 425px; display: inline;">
            <div class="noinfotext"></div>      </div>


        <div id="2" class="list">
                <img class="lazy" src="http://abmo.stephensuess.com/wp-content/uploads/2014/11/HILO-Counter-Display-288x425.jpg" data-original="http://abmo.stephensuess.com/wp-content/uploads/2014/11/HILO-Counter-Display-288x425.jpg" data-original-width="288" data-original-height="425" style="height: 425px; display: inline;">
            <div class="noinfotext"></div>      </div>


        <div id="3" class="list">
                <img class="lazy" src="http://abmo.stephensuess.com/wp-content/uploads/2014/11/HILO-STEEL-Shelf-600-276x425.jpg" data-original="http://abmo.stephensuess.com/wp-content/uploads/2014/11/HILO-STEEL-Shelf-600-276x425.jpg" data-original-width="276" data-original-height="425" style="height: 425px; display: inline;">
            <div class="noinfotext"></div>      </div>


        <div id="4" class="list">
                <img class="lazy" src="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Hi-Lo-Overall-B-600-638x425.jpg" data-original="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Hi-Lo-Overall-B-600-638x425.jpg" data-original-width="638" data-original-height="425" style="height: 425px; display: inline;">
            <div class="noinfotext"></div>      </div>


        <div id="5" class="list">
                <img class="lazy" src="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Hi-Lo-Card-600-283x425.jpg" data-original="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Hi-Lo-Card-600-283x425.jpg" data-original-width="283" data-original-height="425" style="height: 425px; display: inline;">
            <div class="noinfotext"></div>      </div>


        <div id="6" class="list">
                <img class="lazy" src="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Bottle-Details-447x425.jpg" data-original="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Bottle-Details-447x425.jpg" data-original-width="447" data-original-height="425" style="height: 425px; display: inline;">
            <div class="noinfotext"></div>      </div>


        <div id="7" class="list">
                <img class="lazy" src="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Amber-Bottle-Chandelier-600-638x425.jpg" data-original="http://abmo.stephensuess.com/wp-content/uploads/2014/11/Amber-Bottle-Chandelier-600-638x425.jpg" data-original-width="638" data-original-height="425" style="height: 425px; display: inline;">
            <div class="noinfotext"></div>      </div>


        <div id="8" class="list">
                <img class="lazy" src="http://abmo.stephensuess.com/wp-content/uploads/2014/11/HILO-LEG-283x425.jpg" data-original="http://abmo.stephensuess.com/wp-content/uploads/2014/11/HILO-LEG-283x425.jpg" data-original-width="283" data-original-height="425" style="height: 425px; display: inline;">
            <div class="noinfotext"></div>      </div>

            </div>
</div> <div id="projectnav"> 
<a href="#" class="masterTooltip" id="prevy" title="scroll left"><div id="previousimages"></div></a> 
<a href="#" class="masterTooltipScroll" id="nexty" title="scroll right"><div id="nextimages"></div></a>
</div>

Answer 1

试试这个：适用于所有浏览器。

#projectnav {
  width: 100%;
  height: 40px;
  position: relative;
  z-index: 500;
  top: -40px;
  margin-top: -40px;
  padding-top: 40px;
}

删除height:40px;并添加margin-bottom:40px;

<强>校正：

#projectnav {
  width: 100%;
  margin-bottom: 40px;
  position: relative;
  z-index: 500;
  top: -40px;
  margin-top: -40px;
  padding-top: 40px;
}

jQuery动画scrollLeft适用于除Chrome以外的所有浏览器

1 个答案: