scrollTop 按钮仅在第一次单击时起作用

Posted 2023-05-08

【中文标题】scrollTop 按钮仅在第一次单击时起作用

【英文标题】：scrollTop button works on the first click only

【发布时间】：2021-02-14 21:01:31

【问题描述】：

我有一个使用 overflow-y: scroll; 的 div 我想使用一个按钮，点击它会移动到 div 的下一行。我的代码只有在没有点击操作之后才能完美地用于第一次点击。

 <button class="big-scrolTopBtn" id="slideLeft" type="button"><span class="fa fa-chevron-up"></span></button>
        <div class="partners-inner big-scrol" id="scrol">
            <div class="">

                <div class="row media-row-height " style="text-align:center;" dir="rtl">
                    @foreach (var item in Model)
                    
                       
                            foreach (var item1 in item.tbl_Videos)
                            

                                <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 left-border directors-top-padding" style="text-align:center;">
                                    @if (!string.IsNullOrEmpty(item1.PhotoURL))
                                     
                                                <a href="@item1.VideoURL">
                                                </a>
                                                <img src="@Url.Content(String.Format(ConfigurationManager.AppSettings["AdminDomain"] + "0", Url.Content(item1.PhotoURL)))" class="img-media">

                                    
                                </div>

                            
                        
                    </div>

            </div>
        </div>
        <button class="scrolBotBtn" id="slideRight" type="button"><span class="fa fa-chevron-down"></span></button>

JS：

$(document).ready(function () 

        $('#slideRight').click(function () 

            $('#scrol').scrollTop(300);
        );

        $('#slideLeft').click(function () 
            $('#scrol').scrollTop(-300);
        );
    );

CSS：

.big-scrol 
        height: 300px;
        overflow-y: scroll;
    

    .media-row-height 
        height: 900px;
        width: 1500px;
        margin: auto;
        padding: 10px;
    

【问题讨论】：

看起来很复杂。这些解决方案有帮助吗？ ***.com/questions/37084343/…***.com/questions/45191067/…

【参考方案1】：

要使其正常工作，您必须在每次点击时增加或减少价值。

我们还需要知道滚动元素有多高才能停止添加值。为此，我添加了被滚动元素的 ID id="wrap"

$(document).ready(function () 
    var top = 0;
    var winH = $('#wrap').height();

    $('#slideRight').click(function () 
        if (top < winH)  top = top + 300; ;
        $('#scrol').scrollTop(top);
    );

    $('#slideLeft').click(function () 
        top = top - 300;
        if (top < 0)  top = 0 ;
        $('#scrol').scrollTop(top);
    );
);

.big-scrol 
    height: 300px;
    overflow-y: scroll;


.media-row-height 
    height: 900px;
    width: 1500px;
    margin: auto;
    padding: 10px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<button class="big-scrolTopBtn" id="slideLeft" type="button"><span class="fa fa-chevron-up">UP</span></button>
<div class="partners-inner big-scrol" id="scrol">
    <div class="">

        <div id="wrap" class="row media-row-height" style="text-align:center;" dir="rtl">
            <!-- @foreach (var item in Model)
            

            foreach (var item1 in item.tbl_Videos)
            

            <div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 left-border directors-top-padding"
                style="text-align:center;">
                @if (!string.IsNullOrEmpty(item1.PhotoURL))
                
                <a href="@item1.VideoURL">
                </a>
                <img src="@Url.Content(String.Format(ConfigurationManager.AppSettings[" AdminDomain"] + "0" ,
                    Url.Content(item1.PhotoURL)))" class="img-media">

                
            </div>

            
             -->
        </div>

    </div>
</div>
<button class="scrolBotBtn" id="slideRight" type="button"><span class="fa fa-chevron-down">DOWN</span></button>