質問編集履歴

2 誤字

zukeyama

zukeyama score 9

2017/10/24 09:47  投稿

スマホ:css position fixed内でカクつかずにスムーズにスクロールさせることは可能ですか?
css position fixed内でカクつかずにスムーズにスクロールさせることは可能ですか?
※iPhone IOS9 Safari
ポップアップで子要素を表示させています。
そこで、背景(ここでは親要素)を固定し、
ポップアップさせる要素(ここでは子要素)の
スクロールをカクつかずにスムーズにスクロールさせることは可能ですか?
現在の構造は親要素を固定(fixed)させているのですが
子要素が画面内に収まらずスクロールさせております。
しかし、fixedさせた関係で子要素がカクカクと硬いスクロールとなってしまいます。
どなたか解決策をご教授いただけないでしょうか?
因みに、
-webkit-overflow-scrolling: touch;
も試しましたが、バウンスした際に、画面がフリーズする又は、
子要素を開いた段階で、フリーズします。
至急、解決させたいと思いますので宜しくお願いします。
```html  
<!DOCTYPE html>  
<html lang="ja"><head><meta charset="UTF-8"><title>test</title>  
<link rel="stylesheet" href="/sptest/css/test.css">  
<!-- SiteCatalyst -->  
<script src="/sptest/js/jquery-3.2.1.min.js"></script>  
<script src="/sptest/js/test.js"></script>  
<style type="text/css">  
/* any sp styles */  
</style></head><body class="">  
<div class="LyContents">  
 <!--OutputContent-->  
 <div class="OutputContent">  
   <!--styling-->  
   <section id="Lp_styling">  
     <div class="Lp_content-inner">  
       <div id="container" class="Lp_styling__tab-content">  
         <!--mens-->  
         <div class="item" data-filter-class='["onstyle", "mens", "all"]'><a href="javascript:void(0)"><img src="https://pbs.twimg.com/profile_images/581025665727655936/9CnwZZ6j.jpg" alt=""></a>  
         <!--container__modal-main-->  
         <div class="Lp_container__modal-main hidecontent">  
           <div class="Lp_styling__modal-partbx">  
           <ul class="Lp_styling__modal-list">  
             <li><a href="#"><span class="Lp_styling__modal-product"> ●●●</span><br>本体価格 99,999円(税込99,999円)<br><span class="Lp_styling__modal-partno">品番:●●●●●</span></a></li>  
             <li><span class="Lp_styling__modal-product"> ●●●●●</span><br>本体価格 9,999円(税込9,999円)<br><span class="Lp_styling__modal-partno">品番:●●●●●</span></li>  
             <li><a href="#"><span class="Lp_styling__modal-product"> 【***】<br>●●●●●●●●●●●●</span><br>本体価格99,999円(税込99,999円)<br><span class="Lp_styling__modal-partno">品番:●●●●●</span></a></li>  
             <li><a href="#"><span class="Lp_styling__modal-product"> 【***】<br>●●●●●●●●●●●●●●●●●</span><br>本体価格 9,999円(税込9,999円)<br><span class="Lp_styling__modal-partno">品番:●●●●●</span></a></li>  
             <li><a href="#"><span class="Lp_styling__modal-product"> ●●●●●●●</span><br><span class="Lp_styling__modal-partno">品番:●●●●●●</span></a></li>  
           </ul>  
           <div class="Lp_styling__modal-other">※その他アイテム、スタイリスト手配。</div>  
           </div>  
         </div>  
         <!--/container__modal-main-->  
         </div>  
         </div>  
         <!-- all -->  
     </div>  
     </div><!--Lp_content-inner-->  
     <!--styling-modal-->  
     <div class="Lp_styling__modal">  
       <div class="Lp_styling__modal-inner">  
       <img src="/contents/images/freeLp/sugoshell/fashion__img05_sp.jpg" alt="" id="modal_img">  
       <div class="Lp_styling__modal-content">  
         <p class="Lp_styling__modal-ttl"></p>  
         <div class="Lp_styling__modal-main">  
         </div>  
       </div>  
       <div class="Lp_styling__modal-close"></div>  
       </div>  
     </div>  
     <!--/styling-modal-->  
   </section>  
   <!--/styling-->  
 </div><!--OutputContent-->  
</div><!-- /.LyContents -->  
<!-- /LyWrap--></div>  
</body></html>  
```  
 
```css
body {  
 line-height: 1;  
}  
img {  
 display: inline-block;  
 vertical-align: middle;  
 max-width: 100%;  
}  
.hidecontent{  
 display: none;  
}  
.Lp_content-inner {  
 width: 94.2%;  
 margin: 0 auto;  
}  
 
/* filter */  
#container {  
 width: 100%;  
 margin: 0 auto;  
 position: relative;  
 overflow: hidden;  
}  
.item.inactive {  
 visibility: hidden;  
 opacity: 0;  
}  
#Lp_styling{  
 padding-bottom: 6.9%;  
}  
#Lp_styling .Lp_sub-title{  
 width: 16%;  
 margin: 0 auto 2.3%;  
 padding-top: 14%;  
}  
.Lp_styling__img01 {  
 margin-bottom: 8.6%;  
}  
#Lp_styling .Lp_desc-titl {  
 width: 55.2%;  
 margin: 0 auto 4.7%;  
}  
#Lp_styling .Lp_desc-txt {  
 width: 80.6%;  
 margin: 0 auto 15.6%;  
}  
.Lp_styling__img02 {  
 width: 41.3%;  
 display: block;  
 margin: 0 auto 3.4%;  
}  
.Lp_styling__img02-cap {  
 width: 45%;  
 margin: 0 auto 3%;  
}  
.Lp_styling__img02-txt {  
 width: 88.9%;  
 margin: 0 auto 11.3%;  
}  
 
/* styling__filter */  
.Lp_styling__tab {  
 margin-bottom: 4.34%;  
}  
.Lp_styling__tab ul{  
 display: -webkit-box;  
 display: -ms-flexbox;  
 display: -webkit-flex;  
 display: flex;  
 -ms-flex-wrap: wrap;  
 -webkit-flex-wrap: wrap;  
 flex-wrap: wrap;  
 width: 100%;  
}  
.Lp_styling__tab li{  
 font-size: 3.1vw;  
 background-color:#000;  
 color: #fff;  
 text-align: center;  
 width: calc(99.5% / 2);  
 padding: 1.5em 0;  
 border: 1px solid #fff;  
 margin: 0 auto;  
}  
.Lp_styling__tab li a{  
 color: #fff;  
}  
.item{  
 position: relative;  
 overflow: hidden;  
 cursor: pointer;  
}  
.item img{  
 transition: transform .3s linear;  
}  
.item.active img{  
 -ms-transform: scale(1.25);  
 -webkit-transform: scale(1.25);  
 -moz-transform: scale(1.25);  
 -o-transform: scale(1.25);  
 transform: scale(1.25);  
 transition: transform .3s linear;  
}  
.item::before{  
 position: absolute;  
 content: '';  
 width: 100%;  
 height: 100%;  
 box-shadow: 6px 6px 0px #ff5d58 inset,-6px -6px 0px #ff5d58 inset;  
 opacity: 0;  
 transition: all .3s linear;  
}  
.item.active::before{  
 opacity: 1;  
 z-index: 5;  
 transition: all .3s linear;  
}  
.item.appear{  
 opacity: 1 !important;  
 transition: opacity 1.5s linear;  
}  
/* modal window */
.Lp_styling__modal {
 display: none;
 position: fixed;
 width: 100%;
 top: 50;
 left: 0;
 z-index: 999;
 background-color: #fff;
 height: 100%;
 overflow-y: scroll;
}
.Lp_styling__modal-inner {
 height: 100%;
 overflow-y: scroll;
}
.Lp_styling__modal-content {
 width: 90%;
 margin: 7% auto;
 font-size: 12px;
}
.Lp_styling__modal-partbx {
 border-bottom: 1px solid #c8c8c8;
 padding-bottom: 2em;
 margin-bottom: 5%;
}
.Lp_styling__modal-partbx:last-child {
 border-bottom: none;
}
.Lp_styling__modal-ttl {
 margin-bottom: 6.1%;
 font-size: 4.2vw;
 line-height: 1.6;
 font-weight: 900;
}
.Lp_styling__modal-other{
 font-size: 2.4vw;
}
.Lp_styling__modal-name,
.Lp_styling__modal-topval,
.Lp_styling__modal-product{
 font-size: 3.2vw;
 font-weight: 900;
}
.Lp_styling__modal-name {
 margin-bottom: 4.9%;
}
.Lp_styling__modal-list li{
 margin-bottom: 6%;
 line-height: 1.5;
 font-size: 3.2vw;
 letter-spacing: 0.6px;
}
.Lp_styling__modal-list li a{
 text-decoration: underline;
}
.Lp_styling__modal-topval {
 display: inline-block;
 margin-bottom: 1.2%;
}
.Lp_styling__modal-partno {
 font-size: 2.4vw;
}
.Lp_styling__modal-close {
 position: absolute;
 top:0;
 right:0;
 background-color: #ededed;
 text-align: center;
 width: 30px;
 height: 30px;
}
.Lp_styling__modal-close:before{
 content: "";
 position: absolute;
 display: inline-block;
 top: 7px;
 left: 15px;
 width: 2px;
 height: 15px;
 border:0;
 margin:0;
 padding:0;
 background-color:#000;
 -moz-transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 transform:rotate(45deg);
}
.Lp_styling__modal-close:after{
 content: "";
 position: absolute;
 display: inline-block;
 top: 7px;
 left: 15px;
 width: 2px;
 height: 15px;
 border: 0;
 margin: 0;
 padding: 0;
 background-color: #000;
 -moz-transform: rotate(-45deg);
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
```
```js
/* アイテムのモーダル出現処理 */
$(function(){
 $(document).on('click','#container .item',function(){
     current_scrollY = $( window ).scrollTop();     
     $( 'body' ).css( {
       position: 'fixed',
       width: '100%',
       top: -1 * current_scrollY
     } );
     
     $('#container .item').removeClass('active');
     $(this).addClass('active');
     var $imgData = $(this).find('img').attr('src');
     //var $changeImg = $imgData.replace('img','modal');
     var $listData = $(this).find('.Lp_container__modal-main').html();
     var $imgTitl = $(this).find('img').attr('alt');
     $('#modal_img').attr('src',$imgData);
     $('.Lp_styling__modal-main').html($listData);
     $('.Lp_styling__modal-ttl').html($imgTitl);
     $('.Lp_styling__modal').css({height:'100%'});
     $('.Lp_styling__modal-inner').css({height:'100%'});
     //0.5秒後にモーダルを表示
     setTimeout(function(){
       $('.Lp_styling__modal').css('display','block').not(":animated").animate({ top: 0, opacity: 1}, 400,function(){
         $('.Lp_styling__modal-close').css('position','fixed');
         
       }); 
   },300);
 });
 $('.Lp_styling__modal-close').click(function(){
   $( 'body' ).attr( { style: '' } );
   $( 'html, body' ).prop( { scrollTop: current_scrollY } );
   $('#container .item').removeClass('active');
   $('.Lp_styling__modal').not(":animated").animate({ top: 50, opacity: 0 }, 500,function(){
     $('.Lp_styling__modal-inner').scrollTop(0);
     $(this).css('display','none');
   });
   $('.Lp_styling__modal-close').css('position','absolute');
 });
});
```
  • CSS

    8421 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1 サンプルソースを記述

zukeyama

zukeyama score 9

2017/10/18 16:46  投稿

スマホ:css position fixed内でカクつかずにスムーズにスクロールさせることは可能ですか?
css position fixed内でカクつかずにスムーズにスクロールさせることは可能ですか?
※iPhone IOS9 Safari
ポップアップで子要素を表示させています。
そこで、背景(ここでは親要素)を固定し、
ポップアップさせる要素(ここでは子要素)の
スクロールをカクつかずにスムーズにスクロールさせることは可能ですか?
現在の構造は親要素を固定(fixed)させているのですが
子要素が画面内に収まらずスクロールさせております。
しかし、fixedさせた関係で子要素がカクカクと硬いスクロールとなってしまいます。
どなたか解決策をご教授いただけないでしょうか?
因みに、
-webkit-overflow-scrolling: touch;
も試しましたが、バウンスした際に、画面がフリーズする又は、
子要素を開いた段階で、フリーズします。
至急、解決させたいと思いますので宜しくお願いします。
```.Lp_styling__modal {
```html
<!DOCTYPE html>
<html lang="ja"><head><meta charset="UTF-8"><title>test</title>
<link rel="stylesheet" href="/sptest/css/test.css">
<!-- SiteCatalyst -->
<script src="/sptest/js/jquery-3.2.1.min.js"></script>
<script src="/sptest/js/test.js"></script>
<style type="text/css">
/* any sp styles */
</style></head><body class="">
<div class="LyContents">
 <!--OutputContent-->
 <div class="OutputContent">
   <!--styling-->
   <section id="Lp_styling">
     <div class="Lp_content-inner">
       <div id="container" class="Lp_styling__tab-content">
         <!--mens-->
         <div class="item" data-filter-class='["onstyle", "mens", "all"]'><a href="javascript:void(0)"><img src="https://pbs.twimg.com/profile_images/581025665727655936/9CnwZZ6j.jpg" alt=""></a>
         <!--container__modal-main-->
         <div class="Lp_container__modal-main hidecontent">
           <div class="Lp_styling__modal-partbx">
           <ul class="Lp_styling__modal-list">
             <li><a href="#"><span class="Lp_styling__modal-product"> ●●●</span><br>本体価格 99,999円(税込99,999円)<br><span class="Lp_styling__modal-partno">品番:●●●●●</span></a></li>
             <li><span class="Lp_styling__modal-product"> ●●●●●</span><br>本体価格 9,999円(税込9,999円)<br><span class="Lp_styling__modal-partno">品番:●●●●●</span></li>
             <li><a href="#"><span class="Lp_styling__modal-product"> 【***】<br>●●●●●●●●●●●●</span><br>本体価格99,999円(税込99,999円)<br><span class="Lp_styling__modal-partno">品番:●●●●●</span></a></li>
             <li><a href="#"><span class="Lp_styling__modal-product"> 【***】<br>●●●●●●●●●●●●●●●●●</span><br>本体価格 9,999円(税込9,999円)<br><span class="Lp_styling__modal-partno">品番:●●●●●</span></a></li>
             <li><a href="#"><span class="Lp_styling__modal-product"> ●●●●●●●</span><br><span class="Lp_styling__modal-partno">品番:●●●●●●</span></a></li>
           </ul>
           <div class="Lp_styling__modal-other">※その他アイテム、スタイリスト手配。</div>
           </div>
         </div>
         <!--/container__modal-main-->
         </div>
         </div>
         <!-- all -->
     </div>
     </div><!--Lp_content-inner-->
     <!--styling-modal-->
     <div class="Lp_styling__modal">
       <div class="Lp_styling__modal-inner">
       <img src="/contents/images/freeLp/sugoshell/fashion__img05_sp.jpg" alt="" id="modal_img">
       <div class="Lp_styling__modal-content">
         <p class="Lp_styling__modal-ttl"></p>
         <div class="Lp_styling__modal-main">
         </div>
       </div>
       <div class="Lp_styling__modal-close"></div>
       </div>
     </div>
     <!--/styling-modal-->
   </section>
   <!--/styling-->
 </div><!--OutputContent-->
</div><!-- /.LyContents -->
<!-- /LyWrap--></div>
</body></html>
```
```css
body {
 line-height: 1;
}
img {
 display: inline-block;
 vertical-align: middle;
 max-width: 100%;
}
.hidecontent{
 display: none;
}
.Lp_content-inner {
 width: 94.2%;
 margin: 0 auto;
}
/* filter */
#container {
 width: 100%;
 margin: 0 auto;
 position: relative;
 overflow: hidden;
}
.item.inactive {
 visibility: hidden;
 opacity: 0;
}
#Lp_styling{
 padding-bottom: 6.9%;
}
#Lp_styling .Lp_sub-title{
 width: 16%;
 margin: 0 auto 2.3%;
 padding-top: 14%;
}
.Lp_styling__img01 {
 margin-bottom: 8.6%;
}
#Lp_styling .Lp_desc-titl {
 width: 55.2%;
 margin: 0 auto 4.7%;
}
#Lp_styling .Lp_desc-txt {
 width: 80.6%;
 margin: 0 auto 15.6%;
}
.Lp_styling__img02 {
 width: 41.3%;
 display: block;
 margin: 0 auto 3.4%;
}
.Lp_styling__img02-cap {
 width: 45%;
 margin: 0 auto 3%;
}
.Lp_styling__img02-txt {
 width: 88.9%;
 margin: 0 auto 11.3%;
}
/* styling__filter */
.Lp_styling__tab {
 margin-bottom: 4.34%;
}
.Lp_styling__tab ul{
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -ms-flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 width: 100%;
}
.Lp_styling__tab li{
 font-size: 3.1vw;
 background-color:#000;
 color: #fff;
 text-align: center;
 width: calc(99.5% / 2);
 padding: 1.5em 0;
 border: 1px solid #fff;
 margin: 0 auto;
}
.Lp_styling__tab li a{
 color: #fff;
}
.item{
 position: relative;
 overflow: hidden;
 cursor: pointer;
}
.item img{
 transition: transform .3s linear;
}
.item.active img{
 -ms-transform: scale(1.25);
 -webkit-transform: scale(1.25);
 -moz-transform: scale(1.25);
 -o-transform: scale(1.25);
 transform: scale(1.25);
 transition: transform .3s linear;
}
.item::before{
 position: absolute;
 content: '';
 width: 100%;
 height: 100%;
 box-shadow: 6px 6px 0px #ff5d58 inset,-6px -6px 0px #ff5d58 inset;
 opacity: 0;
 transition: all .3s linear;
}
.item.active::before{
 opacity: 1;
 z-index: 5;
 transition: all .3s linear;
}
.item.appear{
 opacity: 1 !important;
 transition: opacity 1.5s linear;
}
/* modal window */
.Lp_styling__modal {
 display: none;
 position: fixed;
 width: 100%;
 top: 50;
 left: 0;
 z-index: 999;
 background-color: #fff;
 height: 100%;
 overflow-y: scroll;  
}
.Lp_styling__modal-inner {
 height: 100%;
 overflow-y: scroll;
}
.Lp_styling__modal-content {  
 width: 90%;  
 margin: 7% auto;  
 font-size: 12px;  
}  
.Lp_styling__modal-partbx {  
 border-bottom: 1px solid #c8c8c8;  
 padding-bottom: 2em;  
 margin-bottom: 5%;  
}  
.Lp_styling__modal-partbx:last-child {  
 border-bottom: none;  
}  
.Lp_styling__modal-ttl {  
 margin-bottom: 6.1%;  
 font-size: 4.2vw;  
 line-height: 1.6;  
 font-weight: 900;  
}  
.Lp_styling__modal-other{  
 font-size: 2.4vw;  
}  
.Lp_styling__modal-name,  
.Lp_styling__modal-topval,  
.Lp_styling__modal-product{  
 font-size: 3.2vw;  
 font-weight: 900;  
}  
.Lp_styling__modal-name {  
 margin-bottom: 4.9%;  
}  
.Lp_styling__modal-list li{  
 margin-bottom: 6%;  
 line-height: 1.5;  
 font-size: 3.2vw;  
 letter-spacing: 0.6px;  
}  
.Lp_styling__modal-list li a{  
 text-decoration: underline;  
}  
.Lp_styling__modal-topval {  
 display: inline-block;  
 margin-bottom: 1.2%;  
}  
.Lp_styling__modal-partno {  
 font-size: 2.4vw;  
}  
.Lp_styling__modal-close {  
 position: absolute;  
 top:0;  
 right:0;  
 background-color: #ededed;  
 text-align: center;  
 width: 30px;  
 height: 30px;  
}  
.Lp_styling__modal-close:before{  
 content: "";  
 position: absolute;  
 display: inline-block;  
 top: 7px;  
 left: 15px;  
 width: 2px;  
 height: 15px;  
 border:0;  
 margin:0;  
 padding:0;  
 background-color:#000;  
 -moz-transform:rotate(45deg);  
 -webkit-transform:rotate(45deg);  
 transform:rotate(45deg);  
}  
.Lp_styling__modal-close:after{  
 content: "";  
 position: absolute;  
 display: inline-block;  
 top: 7px;  
 left: 15px;  
 width: 2px;  
 height: 15px;  
 border: 0;  
 margin: 0;  
 padding: 0;  
 background-color: #000;  
 -moz-transform: rotate(-45deg);  
 -webkit-transform: rotate(-45deg);  
 transform: rotate(-45deg);  
}  
```  
 
```js  
 
/* アイテムのモーダル出現処理 */  
$(function(){  
 $(document).on('click','#container .item',function(){  
     current_scrollY = $( window ).scrollTop();       
     $( 'body' ).css( {  
       position: 'fixed',  
       width: '100%',  
       top: -1 * current_scrollY  
     } );  
       
     $('#container .item').removeClass('active');  
     $(this).addClass('active');  
     var $imgData = $(this).find('img').attr('src');  
     //var $changeImg = $imgData.replace('img','modal');  
     var $listData = $(this).find('.Lp_container__modal-main').html();  
     var $imgTitl = $(this).find('img').attr('alt');  
     $('#modal_img').attr('src',$imgData);  
     $('.Lp_styling__modal-main').html($listData);  
     $('.Lp_styling__modal-ttl').html($imgTitl);  
     $('.Lp_styling__modal').css({height:'100%'});  
     $('.Lp_styling__modal-inner').css({height:'100%'});  
     //0.5秒後にモーダルを表示  
     setTimeout(function(){  
       $('.Lp_styling__modal').css('display','block').not(":animated").animate({ top: 0, opacity: 1}, 400,function(){  
         $('.Lp_styling__modal-close').css('position','fixed');  
           
       });   
   },300);  
 });  
 $('.Lp_styling__modal-close').click(function(){  
   $( 'body' ).attr( { style: '' } );  
   $( 'html, body' ).prop( { scrollTop: current_scrollY } );  
   $('#container .item').removeClass('active');  
   $('.Lp_styling__modal').not(":animated").animate({ top: 50, opacity: 0 }, 500,function(){  
     $('.Lp_styling__modal-inner').scrollTop(0);  
     $(this).css('display','none');  
   });  
   $('.Lp_styling__modal-close').css('position','absolute');  
 });  
});  
 
```
  • CSS

    8421 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る