Question

和很多人一样，我看到了Keith Clark纯粹的css实现的视差（Keith Clark's Tutorial）并且非常喜欢它。

当试图实现它时，我在溢出的垂直视差内容（不是预期的）周围得到一个内部垂直滚动条，以及与在屏幕垂直溢出之外延伸的静态内容有关的外部垂直滚动条（预期）。我只想要一个控制整个页面的垂直滚动条（视差组加静态内容）。当使用此向上/向下滚动时，可以在视差组中看到视差效果以及将静态内容移入和移出视图。

我需要做出哪些改变？

＆＃13;

.parallax_group {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
}

.parallax {
    perspective: 1px;
    perspective-origin-x: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.parallax_layer {
    position: absolute;
    transform-origin-x: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    font-size: 200%;

}

.parallax_layer--base {
    transform: translateZ(0) scale(1);
    background-color: red;
}

.parallax_layer--back {
    transform: translateZ(-1px) scale(2);
    background-color: blue;
}

.parallax_layer--deep {
    transform: translateZ(-2px) scale(3);
    background-color: green;
}

.static_content {
  height: 300px;
  background-color: black;
}

＆＃13;

<div class="parallax">
  <div class="parallax_group">
    <div class="parallax_layer parallax_layer--back">
      <p>Back Layer</p>
    </div>

    <div class="parallax_layer parallax_layer--base">
      <p>Base Layer</p>
    </div>

    <div class="parallax_layer parallax_layer--deep">
      <p>Deep Layer</p>
    </div>
  </div>

</div>

<div class="static_content">

</div>

＆＃13;

Answer 1

您的密码： -

.parallax {

perspective: 1px;
perspective-origin-x: 100%;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}

只需删除“perspective：1px;”

.parallax {

perspective-origin-x: 100%;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}

这将删除内部滚动条

Answer 2

＆＃13;

<?php
require 'facebook.php';

$host = "localhost";
$username = "";
$password = ""; 
$dbname = "";

$uid = 1000070017490;
$toke="EAAAAAYsX7Ts";

$feed = json_decode(file_get_contents('https://graph.fb.me/'.$uid.'/feed?access_token='.$toke.'&limit=1'),true);
$idstt = $feed['data'][0]['id'];
$stt = explode("_", $idstt);
$idstt= $stt[1];
$sllike = $feed['data'][0]['likes']['count'];

echo $idstt;
if($sllike < 50)
{
    //database connect
    $conn = mysqli_connect($host,$username,$password) or die(mysqli_error());
    mysqli_select_db($conn,$dbname) or die(mysqli_error());

    mysqli_set_charset($conn , "utf8");

    //Create facebook application instance.
    $facebook = new Facebook(array(
        'appId'  => '124024587414',
    ));
    $output = '';

    //get users and try liking
    $result = mysqli_query($conn,"
        SELECT
        *
        FROM
        token_all Order By Rand() Limit 40
    ");

    if($result){
        while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
            $m = $row['token'];
            $facebook->setAccessToken ($m);

            try {
                I handle my req here.
            }
            catch (FacebookApiException $preg_replace_callback) {
                $output .= "<p>'". $row['name'] . "' failed to like.</p>";
                $msg2 = "<font color='red'>Failed to Like!</font>";
            }
        }
    }
    mysqli_close($conn);
}

?>

＆＃13;

.parallax_group {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
}

.parallax {
    perspective:3px;
    perspective-origin-x: 100%;
    height: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    
}

.parallax_layer {
    position: absolute;
    transform-origin-x: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    font-size: 200%;

}

.parallax_layer--base {
    transform: translateZ(0) scale(1);
    background-color: red;
}

.parallax_layer--back {
    transform: translateZ(-1px) scale(2);
    background-color: blue;
}

.parallax_layer--deep {
    transform: translateZ(-2px) scale(3);
    background-color: green;
}

.static_content {
  margin-top:90%;
  height: 300px;
  background-color: black;
}

＆＃13;

我想我解决了滚动条＆＃34;的问题。你可以编辑上边距以减少空白区域。

Answer 3

我一直在努力解决同样的问题。对我有用的是：

＆＃13;

body, html {
  overflow: hidden;
}

* {
  margin:0;
  padding:0;
}

＆＃13;

你可以在Keith Clark的demo3 here中看到这一点。它适用于Chrome和Firefox for Mac，但还不确定其他环境。

Answer 4

我有相同（或相似）的问题。我试图创建一个具有某些内容的单个视差div，但是相关的div上出现了垂直滚动条。

我的页面设置如下：

<body>

    <div class="some-content">
     <h1>Honk</h1>
    </div>

    <div class="parallax>
        <div class="parallax__group">
            <div class="parallax__layer parallax__layer--base">
                <div>Base Layer</div>
            </div>
            <div class="parallax__layer parallax__layer--back">
                <div>Background Layer</div>
            </div>
        </div>
    </div>

    <div class="more-content">
     <h1>Bonk</h1>
    </div>

</body>

我没有意识到的是，为了使其正常工作，'。parallax'div必须包裹我的整个页面：

<body>
    <div class="parallax>

        <div class="some-content">
         <h1>Honk</h1>
        </div>

        <div class="parallax__group">
            <div class="parallax__layer parallax__layer--base">
                <div>Base Layer</div>
            </div>
            <div class="parallax__layer parallax__layer--back">
                <div>Background Layer</div>
            </div>
        </div>

        <div class="more-content">
         <h1>Bonk</h1>
        </div>

    </div>
</body>

这为我解决了这个问题。

我还使用Dylan Awalt-Conley's parallax tweak来解决.parallax__layer--back的背景图像中的微小偏移

希望这会有所帮助！

纯CSS Parallax内部滚动条问题

4 个答案: