Question

我想创建一个具有以下结构的网站：

您进入该网站，可以从第1部分向下滚动到第2部分。
然后，您需要决定是再向下滚动一个部分还是向右滚动。

这是我滚动的内容：

   ;With Sales AS 
    (
        Select  D1.BId, D1.Title, D1.Limit , 
       cast(Cast(ISNULL(D2.[Include],0) as bit)AS TINYINT) as [Include],
        D2.ServiceTitle,
        cast(Cast(ISNULL(D2.LimitApply,0) as bit)AS TINYINT) as LimitApply
        FROM        table1 D1
        Inner Join  table2 D2
             ON     D1.BId = D2.BId
    ), 
    Tb_Includ as
    (
    SELECT * FROM Sales
       PIVOT (Max([Include]) FOR ServiceTitle IN (Optical, Dental, Massage)) P
    ),
    Tb_LimitApply as
    (
    SELECT * FROM Sales
       PIVOT (Max(LimitApply)   FOR ServiceTitle  IN (Optical, Dental, Massage)) P
    )
    Select      D1.BId, D1.Title, D1.LimitApply, D1.Limit, D1.Optical as Optical_Include, D1.Dental as Dental_Include, D1.Massage as Massage_Include,
                D2.Optical as Optical_LimitApply, D2.Dental as Dental_LimitApply, D2.Massage as Massage_LimitApply
    From        Tb_Includ D1
    Inner join  Tb_LimitApply D2
        On      D1.BId = D2.BId

JsFiddle

平滑的横向工作正常，但我无法进行垂直工作，你可以在第2和第3部分滚动顶部，但不应该是任何东西。

有什么想法吗？

Answer 1

您可以在jQuery中使用$(window).scrollTop()和$(window).scrollLeft()，然后添加或减去视口的高度或宽度：

$(document).ready(function(){

    $('.scrollDown').click(function(){
        var scrollDown = $(window).scrollTop() + $(window).height();
        $('html, body').animate({scrollTop: scrollDown + 'px'}, 600);
    });

    $('.scrollRight').click(function(){
        var scrollRight = $(window).scrollLeft() + $(window).width();
        $('html, body').animate({scrollLeft: scrollRight + 'px'}, 600);
    });

    $('.scrollUp').click(function(){
        var scrollUp = $(window).scrollTop() - $(window).height();
        $('html, body').animate({scrollTop: scrollUp + 'px'}, 600);
    });

    $('.scrollLeft').click(function(){
        var scrollLeft = $(window).scrollLeft() - $(window).width();
        $('html, body').animate({scrollLeft: scrollLeft + 'px'}, 600);
    });

});

body {
margin: 0;
width: 200vw;
overflow: hidden;
}

section {
position: relative;
display: block;
width: 100vw;
height: 100vh;
}

button {
position: absolute;
display: block;
top: 48vh;
left: 48vw;
width: 160px;
}

button:nth-last-of-type(3) {
position: absolute;
display: block;
top: 38vh;
}

button:nth-of-type(2) {
position: absolute;
display: block;
top: 48vh;
}

button:nth-of-type(3) {
position: absolute;
display: block;
top: 58vh;
}

.x1y2, .x2y2 {
float: left;
display: inline-block;
}

.x1y3 {
clear:left;
}

.x1y1 {
background-color: rgb(255,0,0);
}

.x1y2 {
background-color: rgb(255,255,0);
}

.x2y2 {
background-color: rgb(0,127,0);
}

.x1y3 {
background-color: rgb(0,0,255);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="x1y1">
<button class="scrollDown" type="button">Scroll Down</button>
</section>

<section class="x1y2">
<button class="scrollUp" type="button">Scroll Up</button>
<button class="scrollRight" type="button">Scroll Right</button>
<button class="scrollDown" type="button">Scroll Down</button>
</section>

<section class="x2y2">
<button class="scrollLeft" type="button">Scroll Left</button>
</section>

<section class="x1y3">
<button class="scrollUp" type="button">Scroll Up</button>
</section>

在一个页面上启用水平和垂直滚动

1 个答案: